@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/*
  ═══════════════════════════════════════════════════════════════════════════════
  Yağızlar ERP - Global UI CSS
  ═══════════════════════════════════════════════════════════════════════════════
  Katman: ui
  Bağlı Modüller:
  - Site.Master (layout)
    - Auth.Master (login)
  - Tailwind (CDN)
  
  Tema: Modern SaaS (Linear/Vercel/Stripe tarzı)
  Tema Yönü: Nötr/Antrasit (light) + IDE-benzeri koyu (dark)
  Marka Renkleri: Altın/Amber (#D4A017)
  
  Versiyon: 5.4.0
  Son Güncelleme: 2026-03-04

  2026 Güncellemeler:
  - Container queries desteği
  - Fluid sizing: clamp(), min(), max()
  - Tablet breakpoint (640-1024px) eklendi
  - Sabit px genişlikler → dinamik min()/clamp() ile değiştirildi
  - Evrak Snapshot (Geçmiş Sürüm) modu CSS bileşenleri eklendi
  - Mobile-first responsive yaklaşım
  ═══════════════════════════════════════════════════════════════════════════════
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 1: CSS DEĞİŞKENLERİ (LIGHT TEMA)
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Marka Renkleri ─── */
  --ygz-brand: #D4A017;           /* Altın / Amber - Ana marka rengi */
  --ygz-brand-light: #F5C518;     /* Açık altın */
  --ygz-brand-dark: #B8860B;      /* Koyu altın */
  --ygz-brand-muted: rgba(212, 160, 23, 0.15);
  --ygz-accent: #7C3AED;          /* Modern vurgu (violet) */
  --ygz-accent2: #FF4D8D;         /* Modern vurgu (pink) */
  --ygz-accent3: #00B8D9;         /* Modern vurgu (cyan) */
  
  /* ─── Temel Renkler (Light) ─── */
  /* Modern SaaS: Sıcak nötr arkaplan, yumuşak kontrastlar */
  --ygz-bg: #F8F9FA;              /* Ana arkaplan - sıcak nötr */
  --ygz-bg2: #FFFFFF;             /* Kart/panel arkaplanı */
  --ygz-bg3: #F0F1F3;             /* Alternatif arkaplan */
  --ygz-fg: #1A1D23;              /* Ana metin - yumuşak antrasit */
  --ygz-fg-secondary: #5F6776;    /* İkincil metin - daha yumuşak */

  /* ─── Kontrast Yardımcıları ─── */
  --ygz-muted: rgba(26, 29, 35, 0.72);
  --ygz-muted2: rgba(26, 29, 35, 0.52);
  --ygz-muted3: rgba(26, 29, 35, 0.32);
  
  /* ─── Kart ve Border ─── */
  --ygz-card: #FFFFFF;
  --ygz-card-elevated: #FFFFFF;
  --ygz-border: rgba(26, 29, 35, 0.10);
  --ygz-border-strong: rgba(26, 29, 35, 0.20);
  --ygz-border-subtle: rgba(26, 29, 35, 0.06);
  
  /* ─── Primary (Marka - amber) ─── */
  --ygz-primary: #D4A017;
  --ygz-primary-hover: #B8860B;
  --ygz-primary-contrast: #0B0D12;
  --ygz-primary-ghost: rgba(212, 160, 23, 0.14);
  
  /* ─── Secondary (nötr antrasit) ─── */
  --ygz-secondary: #2B2F38;
  --ygz-secondary-hover: #242832;
  --ygz-secondary-contrast: #FFFFFF;
  
  /* ─── Durum Renkleri ─── */
  --ygz-success: #16A34A;
  --ygz-success-bg: rgba(22, 163, 74, 0.08);
  --ygz-success-contrast: #FFFFFF;
  
  --ygz-danger: #DC2626;
  --ygz-danger-bg: rgba(220, 38, 38, 0.08);
  --ygz-danger-contrast: #FFFFFF;
  
  --ygz-warning: #F59E0B;
  --ygz-warning-bg: rgba(245, 158, 11, 0.08);
  --ygz-warning-contrast: #0A1628;
  
  --ygz-info: #0284C7;
  --ygz-info-bg: rgba(2, 132, 199, 0.08);
  --ygz-info-contrast: #FFFFFF;
  
  /* ─── Buton ─── */
  --ygz-btn-bg: #FFFFFF;
  --ygz-btn-bg-hover: #F2F2F3;
  --ygz-btn-shadow: 0 1px 2px rgba(10, 22, 40, 0.06);

  /* ─── Form Kontrolleri ─── */
  --ygz-input-bg: #FFFFFF;
  --ygz-input-fg: var(--ygz-fg);
  --ygz-input-border: rgba(10, 22, 40, 0.12);
  --ygz-input-border-focus: var(--ygz-primary);
  --ygz-input-placeholder: rgba(26, 29, 35, 0.38);
  --ygz-input-shadow-focus: 0 0 0 3px rgba(212, 160, 23, 0.12);
  
  /* ─── Tablo ─── */
  --ygz-table-header-bg: #F3F4F6;
  --ygz-table-row-odd: #FFFFFF;
  --ygz-table-row-even: #FAFBFC;
  --ygz-table-row-hover: rgba(212, 160, 23, 0.08);

  /* ─── Tablo satır paleti (evrak tipi / kategori) ─── */
  /* Not: Nötr taban + çok hafif tonlama. */
  --ygz-rowcolor-1-bg: rgba(2, 132, 199, 0.06);   /* info */
  --ygz-rowcolor-2-bg: rgba(220, 38, 38, 0.06);   /* danger */
  --ygz-rowcolor-3-bg: rgba(124, 58, 237, 0.06);  /* accent */
  --ygz-rowcolor-4-bg: rgba(245, 158, 11, 0.08);  /* warning */
  --ygz-rowcolor-5-bg: rgba(22, 163, 74, 0.06);   /* success */

  /* ─── Satır tonları (kombinasyon / semantik) ─── */
  --ygz-tone-in-bg: rgba(22, 163, 74, 0.06);
  --ygz-tone-out-bg: rgba(220, 38, 38, 0.06);
  --ygz-tone-transfer-bg: rgba(124, 58, 237, 0.06);
  --ygz-tone-return-bg: rgba(245, 158, 11, 0.08);
  --ygz-tone-neutral-bg: rgba(27, 29, 34, 0.03);
  
  /* ─── Sidebar (Minimal Clean — Linear/Vercel style) ─── */
  --ygz-sidebar-bg: #1B1D22; /* antrasit — marka rengi */
  --ygz-sidebar-fg: rgba(255, 255, 255, 0.92);
  --ygz-sidebar-fg-muted: rgba(255, 255, 255, 0.55);
  --ygz-sidebar-border: rgba(255, 255, 255, 0.06);
  --ygz-sidebar-item-hover: rgba(255, 255, 255, 0.04);
  --ygz-sidebar-item-active: rgba(212, 160, 23, 0.14);
  --ygz-sidebar-accent: var(--ygz-brand);
  --ygz-sidebar-item-active-border: var(--ygz-brand);

  /* ─── Shadows (Modern SaaS — multi-layer, soft) ─── */
  --ygz-shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.03), 0 1px 1px rgba(10, 22, 40, 0.02);
  --ygz-shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.04), 0 2px 6px rgba(10, 22, 40, 0.04);
  --ygz-shadow-md: 0 2px 4px rgba(10, 22, 40, 0.03), 0 4px 12px rgba(10, 22, 40, 0.05), 0 8px 20px rgba(10, 22, 40, 0.04);
  --ygz-shadow-lg: 0 4px 6px rgba(10, 22, 40, 0.02), 0 8px 20px rgba(10, 22, 40, 0.06), 0 16px 36px rgba(10, 22, 40, 0.06);
  --ygz-shadow-xl: 0 8px 16px rgba(10, 22, 40, 0.03), 0 16px 32px rgba(10, 22, 40, 0.06), 0 32px 64px rgba(10, 22, 40, 0.08);

  /* ─── Border Radius (Modern SaaS — Rounded) ─── */
  --ygz-radius-none: 0;
  --ygz-radius-sm: 3px;
  --ygz-radius-md: 4px;
  --ygz-radius-lg: 6px;
  --ygz-radius-xl: 8px;

  /* ─── Transition (Smoother) ─── */
  --ygz-transition-fast: 150ms ease;
  --ygz-transition-normal: 250ms ease;
  --ygz-transition-slow: 400ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 2: CSS DEĞİŞKENLERİ (DARK TEMA)
   ═══════════════════════════════════════════════════════════════════════════════ */

html.dark {
  /* ─── Marka Renkleri (Dark için ayarlanmış) ─── */
  --ygz-brand: #F5C518;
  --ygz-brand-light: #FFD84D;
  --ygz-brand-dark: #D4A017;
  --ygz-brand-muted: rgba(245, 197, 24, 0.12);
  --ygz-accent: #A78BFA;          /* violet */
  --ygz-accent2: #FF4D8D;         /* pink */
  --ygz-accent3: #22D3EE;         /* cyan */
  
  /* ─── Temel Renkler (Dark) ─── */
  /* IDE-benzeri koyu tema — hafif yumuşatılmış kontrast */
  --ygz-bg: #101114;              /* Ana arkaplan */
  --ygz-bg2: #161820;             /* Kart/panel */
  --ygz-bg3: #1C1F28;             /* Alternatif */
  --ygz-fg: #E4E5E9;              /* Ana metin — biraz daha yumuşak */
  --ygz-fg-secondary: #9CA3B4;    /* İkincil metin */

  /* ─── Kontrast Yardımcıları ─── */
  --ygz-muted: rgba(228, 229, 233, 0.78);
  --ygz-muted2: rgba(228, 229, 233, 0.55);
  --ygz-muted3: rgba(228, 229, 233, 0.34);

  /* ─── Kart ve Border ─── */
  --ygz-card: #161820;
  --ygz-card-elevated: #1C1F28;
  --ygz-border: rgba(228, 229, 233, 0.08);
  --ygz-border-strong: rgba(228, 229, 233, 0.15);
  --ygz-border-subtle: rgba(228, 229, 233, 0.05);
  
  /* ─── Primary (Marka - amber) ─── */
  --ygz-primary: #F5C518;
  --ygz-primary-hover: #FFD84D;
  --ygz-primary-contrast: #0B0D12;
  --ygz-primary-ghost: rgba(245, 197, 24, 0.12);
  
  /* ─── Secondary (nötr) ─── */
  --ygz-secondary: #2B2F38;
  --ygz-secondary-hover: #343A45;
  --ygz-secondary-contrast: #E7E7E7;
  
  /* ─── Durum Renkleri ─── */
  --ygz-success: #22C55E;
  --ygz-success-bg: rgba(34, 197, 94, 0.10);
  --ygz-success-contrast: #0A1628;
  
  --ygz-danger: #F87171;
  --ygz-danger-bg: rgba(248, 113, 113, 0.10);
  --ygz-danger-contrast: #0A1628;
  
  --ygz-warning: #FBBF24;
  --ygz-warning-bg: rgba(251, 191, 36, 0.10);
  --ygz-warning-contrast: #0A1628;
  
  --ygz-info: #38BDF8;
  --ygz-info-bg: rgba(56, 189, 248, 0.10);
  --ygz-info-contrast: #0A1628;
  
  /* ─── Buton ─── */
  --ygz-btn-bg: #1A1D24;
  --ygz-btn-bg-hover: #20242D;
  --ygz-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

  /* ─── Form Kontrolleri ─── */
  --ygz-input-bg: #14161B;
  --ygz-input-fg: var(--ygz-fg);
  --ygz-input-border: rgba(148, 163, 184, 0.22);
  --ygz-input-border-focus: var(--ygz-primary);
  --ygz-input-placeholder: rgba(148, 163, 184, 0.55);
  --ygz-input-shadow-focus: 0 0 0 3px rgba(245, 197, 24, 0.14);
  
  /* ─── Tablo ─── */
  --ygz-table-header-bg: #161820;
  --ygz-table-row-odd: #161820;
  --ygz-table-row-even: #1A1D25;
  --ygz-table-row-hover: rgba(245, 197, 24, 0.10);

  /* ─── Tablo satır paleti (evrak tipi / kategori) ─── */
  --ygz-rowcolor-1-bg: rgba(56, 189, 248, 0.08);  /* info */
  --ygz-rowcolor-2-bg: rgba(248, 113, 113, 0.10); /* danger */
  --ygz-rowcolor-3-bg: rgba(167, 139, 250, 0.10); /* accent */
  --ygz-rowcolor-4-bg: rgba(251, 191, 36, 0.10);  /* warning */
  --ygz-rowcolor-5-bg: rgba(34, 197, 94, 0.08);   /* success */

  /* ─── Satır tonları (kombinasyon / semantik) ─── */
  --ygz-tone-in-bg: rgba(34, 197, 94, 0.08);
  --ygz-tone-out-bg: rgba(248, 113, 113, 0.10);
  --ygz-tone-transfer-bg: rgba(167, 139, 250, 0.10);
  --ygz-tone-return-bg: rgba(251, 191, 36, 0.10);
  --ygz-tone-neutral-bg: rgba(231, 231, 231, 0.04);
  
  /* ─── Sidebar (Minimal Clean — Linear/Vercel style) ─── */
  --ygz-sidebar-bg: #0B0C0E;
  --ygz-sidebar-fg: rgba(240, 244, 248, 0.92);
  --ygz-sidebar-fg-muted: rgba(240, 244, 248, 0.48);
  --ygz-sidebar-border: rgba(231, 231, 231, 0.06);
  --ygz-sidebar-item-hover: rgba(231, 231, 231, 0.04);
  --ygz-sidebar-item-active: rgba(245, 197, 24, 0.10);
  --ygz-sidebar-item-active-border: var(--ygz-brand);

  /* ─── Shadows (Dark — multi-layer, colored tint) ─── */
  --ygz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 1px rgba(0, 0, 0, 0.15);
  --ygz-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.18);
  --ygz-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.22), 0 8px 20px rgba(2, 4, 12, 0.16);
  --ygz-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(0, 0, 0, 0.24), 0 16px 36px rgba(2, 4, 12, 0.20);
  --ygz-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.18), 0 16px 32px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(2, 4, 12, 0.26);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 3: FONT & TİPOGRAFİ
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  --ygz-font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --ygz-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ─── Font Size Sistemi (varsayılan = "md") ─── */
  --ygz-fs-base: 10px;
  --ygz-fs-sm: 8px;
  --ygz-fs-xs: 7px;
  --ygz-fs-grid: 10px;
  --ygz-fs-btn: 10px;
  --ygz-fs-input: 10px;
  --ygz-fs-chip-key: 6px;
  --ygz-fs-chip-val: 8px;
  --ygz-fs-filter-label: 7px;
  --ygz-input-h: 29px;
  --ygz-btn-h: 29px;
}

/* Font Size: Eski sm/lg preset'leri kaldırıldı.
   Artık ygz-fontsize.js inline style ile px cinsinden yönetiyor (8px–24px arası sınırsız). */

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 4: BASE & RESET
   ═══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--ygz-font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--ygz-bg) !important;
  color: var(--ygz-fg) !important;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Sayfa başlık rengi (inline style YOK).
   H1 tag'i için browser default margin/padding sıfırlanır; font-size ve weight
   mevcut utility class'ları (Tailwind: text-xl, font-semibold vb.) ile yönetilir. */
.ygz-page-title {
  color: var(--ygz-fg);
  margin: 0;
  padding: 0;
}

/* A11y: Görsel olarak gizli, screen-reader tarafından okunan başlık/etiket.
   H1 gibi semantic yapı için kullanılır (Dashboard ana başlığı). */
.ygz-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Sayfa container: tam genişlik (max-width yok) */
.ygz-page-container {
  width: 100%;
  max-width: 100%;
  padding: 16px;
  /* L-70 fix: overflow-x: hidden kaldırıldı çünkü CSS spec'e göre
     overflow-x: hidden + overflow-y: visible kombinasyonu
     browser tarafından overflow-y: auto'ya zorla dönüştürülüyordu.
     Sonuç: page-container iç scrollbar oluşturup main scroll'la
     çakışıyordu. Artık yatay taşma kontrolü width: 100% + max-width: 100%
     + min-width: 0 ile sağlanıyor; dikey scroll main wrapper'da.

     L-71 fix: position: relative eklendi. Dashboard'daki ECharts canvas'ları
     position: absolute ile konumlanır; containing block olarak en yakın
     positioned ata'yı arar. Page-container static kaldığında absolute
     canvas'lar html'ye göre konumlanıp body'yi ~1924px'e uzatıyor,
     document-level scroll yaratıyordu (L-70 sonrası ortaya çıktı çünkü
     o zamana kadar browser'ın overflow-y auto'ya zorlaması canvas'ları
     page-container içinde clip ediyordu). Şimdi canvas'lar page-container'a
     göre konumlanır → main.overflow:auto tarafından clip edilir → tek
     scroll main'de kalır. */
  position: relative;
  min-width: 0;
  min-height: 0;
}
@media (min-width: 768px) {
  .ygz-page-container { padding: 24px; }
}

/* Dashboard layout grid */
.ygz-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* Grid child overflow sınırlaması: min-width:0 olmadan 1fr taşar */
.ygz-dashboard-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .ygz-dashboard-grid { grid-template-columns: 1fr 1fr; }
}

.ygz-dashboard-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ygz-dashboard-3col > * { min-width: 0; }
@media (min-width: 1024px) {
  .ygz-dashboard-3col { grid-template-columns: 1fr 1fr 1fr; }
}

.ygz-dashboard-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ygz-dashboard-2col > * { min-width: 0; }
/* 2col yan yana yalnızca geniş ekranlarda (iç içe kartlarda sıkışmayı önle) */
@media (min-width: 1280px) {
  .ygz-dashboard-2col { grid-template-columns: 1fr 1fr; }
}

/* Stack layout — tablo kartları her zaman tek sütun (alt alta) */
.ygz-dashboard-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ygz-dashboard-stack > * { min-width: 0; }

/* Dashboard tablo kartlarında max-height + scroll (çok uzun tablolarda) */
.ygz-dashboard-stack .ygz-grid-wrap {
  max-height: 420px;
  overflow-y: auto;
}

/* KPI grid (above the fold) */
.ygz-kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .ygz-kpi-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1280px) {
  .ygz-kpi-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.ygz-kpi-card {
  background: var(--ygz-card);
  border: 1px solid var(--ygz-border);
  border-radius: var(--ygz-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--ygz-shadow-sm);
  transition: box-shadow var(--ygz-transition-normal), border-color var(--ygz-transition-normal);
}

.ygz-kpi-card:hover {
  box-shadow: var(--ygz-shadow-md);
  border-color: var(--ygz-border-strong);
}

.ygz-kpi-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ygz-kpi-card__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ygz-muted);
  text-transform: uppercase;
}

.ygz-kpi-card__tone {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  border: 1px solid var(--ygz-border);
}
.ygz-kpi-tone-good { background: rgba(34, 197, 94, 0.85); border-color: rgba(34, 197, 94, 0.35); }
.ygz-kpi-tone-warn { background: rgba(251, 191, 36, 0.90); border-color: rgba(251, 191, 36, 0.35); }
.ygz-kpi-tone-bad  { background: rgba(255, 77, 141, 0.85); border-color: rgba(255, 77, 141, 0.35); }
.ygz-kpi-tone-info { background: rgba(34, 211, 238, 0.85); border-color: rgba(34, 211, 238, 0.35); }

.ygz-kpi-card__value {
  margin-top: 10px;
  font-family: var(--ygz-font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--ygz-fg);
}

.ygz-kpi-card__desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
}

/* Charts */
.ygz-chart {
  width: 100%;
  height: 280px;
}
@media (min-width: 1024px) {
  .ygz-chart { height: 320px; }
}

/* =========================================================
   Loading Overlay (global)
   ========================================================= */
.ygz-loading-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.30);
  backdrop-filter: blur(10px) saturate(1.1);
}
html.dark .ygz-loading-overlay{
  background: rgba(2, 6, 23, 0.50);
}
.ygz-loading-overlay--show{
  display: flex;
}
.ygz-loading-overlay__card{
  width: min(420px, calc(100vw - 32px));
  border-radius: var(--ygz-radius-xl);
  padding: 20px 18px;
  border: 1px solid var(--ygz-border);
  background: var(--ygz-card);
  box-shadow: var(--ygz-shadow-xl);
  display: flex;
  gap: 14px;
  align-items: center;
  animation: ygz-modal-enter 0.25s ease-out;
}
.ygz-loading-overlay__spinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(148,163,184,0.35);
  border-top-color: var(--ygz-primary);
  animation: ygz-spin 900ms linear infinite;
  flex: 0 0 auto;
}
.ygz-loading-overlay__text{
  font-size: 13px;
  color: var(--ygz-fg);
}
/* Seçim rengi */
::selection {
  background: var(--ygz-brand-muted);
  color: var(--ygz-fg);
}

/* Scrollbar (Light) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ygz-bg3);
}
::-webkit-scrollbar-thumb {
  background: var(--ygz-border-strong);
  border-radius: var(--ygz-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ygz-muted3);
}

/* Scrollbar (Dark) */
html.dark ::-webkit-scrollbar-track {
  background: var(--ygz-bg2);
}
html.dark ::-webkit-scrollbar-thumb {
  background: var(--ygz-border-strong);
}

/* Link renkleri */
a {
  color: var(--ygz-primary);
  text-decoration: none;
  transition: color var(--ygz-transition-fast);
}
a:hover {
  color: var(--ygz-primary-hover);
}

/* Max-width kuralını kaldır */
input, select, textarea {
  max-width: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 5: APP SHELL & LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 6: SIDEBAR (Minimal Clean — Linear/Vercel style, Collapsible)
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  width: 256px;
  background: var(--ygz-sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 1px 0 0 0 var(--ygz-sidebar-border);
  transition: width 300ms ease;
  overflow: hidden;
}

.ygz-sidebar-nav {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.ygz-mobile-sidebar-panel {
  overflow-y: auto;
  background: var(--ygz-sidebar-bg) !important;
  box-shadow: var(--ygz-shadow-xl);
}

/* Sidebar Logo */
.ygz-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 56px;
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--ygz-sidebar-border);
  overflow: hidden;
  white-space: nowrap;
}

.ygz-sidebar-logo-img {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

.ygz-sidebar-logo-text {
  font-size: calc(var(--ygz-fs-base) + 5px);
  font-weight: 700;
  color: var(--ygz-sidebar-fg);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 200ms ease;
}

/* Sidebar Header (Firma bilgileri) */
.ygz-sidebar-header {
  padding: 12px 16px;
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--ygz-sidebar-border);
  overflow: hidden;
}

.ygz-sidebar-header-title {
  font-size: calc(var(--ygz-fs-base) + 3px);
  font-weight: 700;
  color: var(--ygz-sidebar-fg);
  letter-spacing: -0.02em;
}

.ygz-sidebar-header-meta {
  margin-top: 8px;
  font-size: var(--ygz-fs-xs);
  line-height: 1.6;
  color: var(--ygz-sidebar-fg-muted);
}

/* Sidebar Nav Item */
.ygz-sidebar-section {
  padding: 8px 10px 4px;
  margin-top: 4px;
}

.ygz-sidebar-section:first-child {
  margin-top: 0;
}

.ygz-sidebar-section-title {
  padding: 0 10px;
  margin-bottom: 4px;
  font-size: calc(var(--ygz-fs-xs) - 1px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ygz-sidebar-fg-muted);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 200ms ease;
}

/* Nav item text — collapsed durumda gizlenecek */
.ygz-sidebar-nav-text {
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 200ms ease;
}

.ygz-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  border-radius: var(--ygz-radius-md);
  font-size: var(--ygz-fs-sm);
  font-weight: 500;
  color: var(--ygz-sidebar-fg);
  transition: all 200ms ease;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.ygz-sidebar-item:hover {
  background: var(--ygz-sidebar-item-hover);
  border-left-color: rgba(255, 255, 255, 0.15);
  color: var(--ygz-sidebar-fg);
}

.ygz-sidebar-item.active,
.ygz-sidebar-item--active {
  background: var(--ygz-sidebar-item-active);
  border-left-color: var(--ygz-sidebar-item-active-border);
  color: var(--ygz-sidebar-accent);
  font-weight: 600;
}

.ygz-sidebar-item-icon {
  width: 16px;
  height: 16px;
  opacity: 0.65;
  flex-shrink: 0;
}

/* Sidebar Footer */
.ygz-sidebar-footer {
  padding: 10px 12px;
  border-top: none;
  box-shadow: 0 -1px 0 0 var(--ygz-sidebar-border);
  margin-top: auto;
}

.ygz-sidebar-footer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.ygz-sidebar-footer-label {
  font-size: calc(var(--ygz-fs-xs) - 0px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ygz-sidebar-fg-muted);
  margin-bottom: 8px;
}

/* Sidebar Toggle Button (collapse/expand) */
.ygz-sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  margin-top: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ygz-radius-md);
  background: transparent;
  color: var(--ygz-sidebar-fg-muted);
  cursor: pointer;
  transition: all 200ms ease;
}

.ygz-sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ygz-sidebar-fg);
}

html.dark .ygz-sidebar-toggle-btn:hover {
  background: rgba(148, 163, 184, 0.08);
}

.ygz-sidebar-toggle-icon {
  width: 16px;
  height: 16px;
}

/* Expanded durumda: collapse (chevron-left) goster, expand (chevron-right) gizle */
.ygz-sidebar-toggle-collapse { display: block; }
.ygz-sidebar-toggle-expand { display: none; }

/* Sidebar üzerinde kullanılan ters (dark) buton görünümü (inline style YOK) */
.ygz-sidebar-btn-inverse {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ygz-sidebar-fg) !important;
  box-shadow: none !important;
}
.ygz-sidebar-btn-inverse:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
html.dark .ygz-sidebar-btn-inverse:hover {
  background: rgba(148, 163, 184, 0.08) !important;
}

/* Font Size badge — sidebar butonundaki px gostergesi (ygz-fontsize.js tarafindan dinamik olusturulur) */
.ygz-fs-badge {
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* Font Size aktif mod — butona tiklaninca yukari/asagi ok tuslari dinleniyor */
.ygz-fs-active {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
  color: #818cf8 !important;
}
html.dark .ygz-fs-active {
  background: rgba(129, 140, 248, 0.15) !important;
  border-color: rgba(129, 140, 248, 0.4) !important;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2) !important;
  color: #a5b4fc !important;
}

/* ─── Sidebar Mascot (Mini Animated Character) ─── */

/* Container */
.ygz-sidebar-mascot {
  position: relative;
  padding: 8px 10px;
  overflow: visible;
  min-height: 50px;
}

/* Character wrapper — slides in from left */
.ygz-sidebar-mascot__char {
  position: relative;
  cursor: pointer;
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: fit-content;
}

.ygz-sidebar-mascot__char--visible {
  transform: translateX(0);
}

.ygz-sidebar-mascot__char--hidden {
  transform: translateX(-120%);
}

/* Generic character body */
.ygz-mini-char {
  position: relative;
  transition: transform 0.3s ease;
}

.ygz-mini-char:hover {
  transform: scale(1.08);
}

/* Character variants — fixed brand colors (same in light & dark) */
.ygz-mini-char--purple {
  background: #6C3FF5;
  width: 36px;
  height: 48px;
  border-radius: 6px 6px 0 0;
}

.ygz-mini-char--black {
  background: #2D2D2D;
  width: 28px;
  height: 40px;
  border-radius: 5px 5px 0 0;
}

.ygz-mini-char--orange {
  background: #FF9B6B;
  width: 44px;
  height: 32px;
  border-radius: 22px 22px 0 0;
}

.ygz-mini-char--yellow {
  background: #E8D754;
  width: 32px;
  height: 36px;
  border-radius: 16px 16px 0 0;
}

/* Face container */
.ygz-mini-char__face {
  position: absolute;
  display: flex;
  align-items: center;
}

.ygz-mini-char--purple .ygz-mini-char__face {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  gap: 6px;
}

.ygz-mini-char--black .ygz-mini-char__face {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  gap: 5px;
}

.ygz-mini-char--orange .ygz-mini-char__face {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  gap: 10px;
}

.ygz-mini-char--yellow .ygz-mini-char__face {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  gap: 7px;
}

/* Eye (white circle — for purple/black characters) */
.ygz-mini-eye {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Pupil dot */
.ygz-mini-pupil {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2D2D2D;
  transition: transform 0.1s ease-out;
}

/* Standalone pupil — for orange/yellow (no white eye behind) */
.ygz-mini-pupil--standalone {
  width: 5px;
  height: 5px;
}

/* Mouth — yellow character */
.ygz-mini-mouth {
  position: absolute;
  width: 14px;
  height: 2px;
  background: #2D2D2D;
  border-radius: 9999px;
}

/* Speech bubble */
.ygz-mascot-bubble {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 50%;
  transform: translateY(50%) scale(0.9);
  background: var(--ygz-bg);
  color: var(--ygz-fg);
  border: 1px solid var(--ygz-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.4;
  max-width: 200px;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.ygz-mascot-bubble--visible {
  opacity: 1;
  transform: translateY(50%) scale(1);
}

/* Bubble left arrow (triangle pointing left) */
.ygz-mascot-bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-width: 6px 6px 6px 0;
  border-style: solid;
  border-color: transparent var(--ygz-border) transparent transparent;
}

/* Dark theme overrides — bubble */
html.dark .ygz-mascot-bubble {
  background: var(--ygz-sidebar-item-hover);
  border-color: var(--ygz-sidebar-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

html.dark .ygz-mascot-bubble::before {
  border-color: transparent var(--ygz-sidebar-border) transparent transparent;
}

/* Collapsed sidebar — hide mascot */
.ygz-sidebar--collapsed .ygz-sidebar-mascot {
  display: none;
}

/* Responsive — hide on mobile */
@media (max-width: 767.98px) {
  .ygz-sidebar-mascot {
    display: none;
  }
}

/* ─── Collapsed State ─── */
.ygz-sidebar--collapsed {
  width: 64px;
}

/* Collapsed: metinleri gizle */
.ygz-sidebar--collapsed .ygz-sidebar-nav-text {
  opacity: 0;
  width: 0;
  display: none;
}

.ygz-sidebar--collapsed .ygz-sidebar-section-title {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Logo swap: expanded -> full logo, collapsed -> small icon */
.ygz-sidebar-logo--icon { display: none; }
.ygz-sidebar-logo--full { display: block; }

/* Collapsed: logo sadece icon */
.ygz-sidebar--collapsed .ygz-sidebar-logo {
  justify-content: center;
  padding: 14px 12px;
}

.ygz-sidebar--collapsed .ygz-sidebar-logo--full { display: none; }
.ygz-sidebar--collapsed .ygz-sidebar-logo--icon { display: block; }

.ygz-sidebar--collapsed .ygz-sidebar-logo-img {
  height: 28px;
}

/* Collapsed: nav item icon'u ortala */
.ygz-sidebar--collapsed .ygz-sidebar-item {
  justify-content: center;
  padding: 8px 0;
  border-left-color: transparent;
  gap: 0;
}

/* Collapsed: active item hala left accent gosterir */
.ygz-sidebar--collapsed .ygz-sidebar-item.active,
.ygz-sidebar--collapsed .ygz-sidebar-item--active {
  border-left-color: var(--ygz-sidebar-item-active-border);
}

.ygz-sidebar--collapsed .ygz-sidebar-item-icon {
  width: 20px;
  height: 20px;
}

/* Collapsed: section padding */
.ygz-sidebar--collapsed .ygz-sidebar-section {
  padding: 4px 8px 2px;
}

/* Collapsed: footer — dikey layout */
.ygz-sidebar--collapsed .ygz-sidebar-footer {
  padding: 8px;
}

.ygz-sidebar--collapsed .ygz-sidebar-footer-actions {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Collapsed: toggle icon'ları ters cevir */
.ygz-sidebar--collapsed .ygz-sidebar-toggle-collapse { display: none; }
.ygz-sidebar--collapsed .ygz-sidebar-toggle-expand { display: block; }

/* ─── Tooltip (collapsed durumda hover'da gozukur) ─── */
.ygz-sidebar--collapsed .ygz-sidebar-item::after,
.ygz-sidebar--collapsed .ygz-sidebar-toggle-btn::after,
.ygz-sidebar--collapsed .ygz-sidebar-footer-actions .ygz-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--ygz-bg, #18181b);
  color: var(--ygz-fg, #fff);
  border: 1px solid var(--ygz-border, rgba(255,255,255,0.1));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity 150ms ease;
}

/* Tooltip ok isareti (sol tarafa bakan ucgen) */
.ygz-sidebar--collapsed .ygz-sidebar-item::before,
.ygz-sidebar--collapsed .ygz-sidebar-toggle-btn::before,
.ygz-sidebar--collapsed .ygz-sidebar-footer-actions .ygz-btn::before {
  content: '';
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid var(--ygz-border, rgba(255,255,255,0.1));
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  transition: opacity 150ms ease;
}

.ygz-sidebar--collapsed .ygz-sidebar-item:hover::after,
.ygz-sidebar--collapsed .ygz-sidebar-toggle-btn:hover::after,
.ygz-sidebar--collapsed .ygz-sidebar-footer-actions .ygz-btn:hover::after,
.ygz-sidebar--collapsed .ygz-sidebar-item:hover::before,
.ygz-sidebar--collapsed .ygz-sidebar-toggle-btn:hover::before,
.ygz-sidebar--collapsed .ygz-sidebar-footer-actions .ygz-btn:hover::before {
  opacity: 1;
}

/* Footer butonları collapsed'da position: relative olmalı (tooltip icin) */
.ygz-sidebar--collapsed .ygz-sidebar-footer-actions .ygz-btn {
  position: relative;
}

/* Mobile header (üst bar) - inline style YOK */
.ygz-mobile-header {
  border-color: var(--ygz-border) !important;
  background: var(--ygz-card) !important;
}

/* Mobile sidebar firma bloğu - inline style YOK */
.ygz-mobile-firma-wrap {
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--ygz-sidebar-border);
}
.ygz-mobile-firma-meta {
  color: var(--ygz-sidebar-fg-muted);
  line-height: 1.6;
}
.ygz-mobile-sidebar-footer-divider {
  border-top: none;
  box-shadow: 0 -1px 0 0 var(--ygz-sidebar-border);
}

/* Eski Sidebar Collapse (geriye uyumluluk — artık kullanılmıyor) */
html.ygz-sidebar-collapsed .ygz-sidebar {
  display: none !important;
}

#ygzSidebarShowBtn {
  display: none;
}

html.ygz-sidebar-collapsed #ygzSidebarShowBtn {
  display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 7: BUTONLAR
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base Button */
.ygz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 14px;
  min-height: var(--ygz-btn-h);
  font-family: var(--ygz-font-sans);
  font-size: var(--ygz-fs-btn);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--ygz-border);
  border-radius: var(--ygz-radius-md);
  background: var(--ygz-btn-bg);
  color: var(--ygz-fg);
  box-shadow: var(--ygz-btn-shadow);
  cursor: pointer;
  transition: all var(--ygz-transition-fast);
  white-space: nowrap;
}

.ygz-btn:hover {
  background: var(--ygz-btn-bg-hover);
  border-color: var(--ygz-border-strong);
  transform: scale(1.02);
}

.ygz-btn:active {
  transform: scale(0.98);
}

.ygz-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Primary Button */
.ygz-btn-primary {
  background: var(--ygz-primary) !important;
  border-color: var(--ygz-primary) !important;
  color: var(--ygz-primary-contrast) !important;
  box-shadow: var(--ygz-shadow-sm), 0 0 0 0 rgba(212, 160, 23, 0);
}

.ygz-btn-primary:hover {
  background: var(--ygz-primary-hover) !important;
  border-color: var(--ygz-primary-hover) !important;
  box-shadow: var(--ygz-shadow-md), 0 0 20px rgba(212, 160, 23, 0.15);
}

/* Secondary Button */
.ygz-btn-secondary {
  background: var(--ygz-secondary) !important;
  border-color: var(--ygz-secondary) !important;
  color: var(--ygz-secondary-contrast) !important;
}

.ygz-btn-secondary:hover {
  background: var(--ygz-secondary-hover) !important;
  border-color: var(--ygz-secondary-hover) !important;
}

/* Danger Button */
.ygz-btn-danger {
  background: var(--ygz-danger) !important;
  border-color: var(--ygz-danger) !important;
  color: var(--ygz-danger-contrast) !important;
}

.ygz-btn-danger:hover {
  filter: brightness(1.1);
}

/* Success Button */
.ygz-btn-success {
  background: var(--ygz-success) !important;
  border-color: var(--ygz-success) !important;
  color: var(--ygz-success-contrast) !important;
}

.ygz-btn-success:hover {
  filter: brightness(1.1);
}

/* Ghost Button */
.ygz-btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.ygz-btn-ghost:hover {
  background: var(--ygz-primary-ghost) !important;
}

/* Icon Button */
.ygz-icon-btn {
  padding: 8px;
}

.ygz-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Lookup popup: depo hücresi seçimi */
.ygz-lookup-depo--selected {
  outline: 2px solid var(--ygz-primary);
  outline-offset: -2px;
  background: var(--ygz-primary-ghost);
}

/* Button Sizes */
.ygz-btn-sm {
  padding: 6px 12px;
  font-size: var(--ygz-fs-sm);
}

.ygz-btn-lg {
  padding: 12px 22px;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 7.1: SMALL UTILITY CLASSES (tailwind-like, minimal)
   Not: Projede markup içinde kullanılan bazı utility class'lar (absolute/right-2/pr-10 vb.)
   Tailwind olmadan da çalışsın diye burada minimal karşılıkları sağlanır.
   ═══════════════════════════════════════════════════════════════════════════════ */

.relative { position: relative; }
.absolute { position: absolute; }

.right-2 { right: 0.5rem; }
.left-2 { left: 0.5rem; }

.top-1\/2 { top: 50%; }
.\-translate-y-1\/2 { transform: translateY(-50%); }

/* Input içi ikon butonu için sağ padding */
.pr-10 { padding-right: 2.5rem !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 8: FORM KONTROL
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tüm inputlar */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  font-family: var(--ygz-font-sans);
  font-size: var(--ygz-fs-input);
  min-height: var(--ygz-input-h);
  padding: 6px 10px;
  background-color: var(--ygz-input-bg) !important;
  color: var(--ygz-input-fg) !important;
  border: 1px solid var(--ygz-input-border) !important;
  border-radius: var(--ygz-radius-md);
  outline: none;
  transition: all var(--ygz-transition-fast);
  caret-color: var(--ygz-primary);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ygz-input-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12);
}

input::placeholder,
textarea::placeholder {
  color: var(--ygz-input-placeholder) !important;
}

/* Global input class */
.ygz-input {
  width: 100%;
  font-family: var(--ygz-font-sans);
  font-size: var(--ygz-fs-input);
  min-height: var(--ygz-input-h);
  padding: 6px 10px;
  background-color: var(--ygz-input-bg) !important;
  color: var(--ygz-input-fg) !important;
  border: 1px solid var(--ygz-input-border) !important;
  border-radius: var(--ygz-radius-md);
  outline: none;
  transition: all var(--ygz-transition-fast);
}

.ygz-input:focus {
  border-color: var(--ygz-input-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12);
}

/* Hatalı input kenarlığı — validation */
.ygz-input--error {
  border-color: var(--ygz-danger) !important;
}

/* Select özel stili */
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}

select option {
  background: var(--ygz-bg) !important;
  color: var(--ygz-fg) !important;
  padding: 8px;
}

/* Focus sınıfı */
.ygz-focus:focus {
  outline: none;
  border-color: var(--ygz-input-border-focus) !important;
  box-shadow: var(--ygz-input-shadow-focus);
}

/* Tarih input */
.ygz-date {
  font-family: var(--ygz-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Label */
.ygz-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--ygz-fs-sm);
  font-weight: 600;
  color: var(--ygz-muted);
}

/* Form Group */
.ygz-form-group {
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 9: KARTLAR
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-card {
  background: var(--ygz-card);
  border: 1px solid var(--ygz-border);
  border-radius: var(--ygz-radius-lg);
  box-shadow: var(--ygz-shadow-sm);
  min-width: 0;     /* Grid child olarak taşmayı önle */
  max-width: 100%;
  overflow: hidden;  /* İçerik karttan taşmasın, scroll ygz-grid-wrap'ta */
  transition: box-shadow var(--ygz-transition-normal), border-color var(--ygz-transition-normal);
}

.ygz-card-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--ygz-border);
  font-size: var(--ygz-fs-base);
  font-weight: 600;
  color: var(--ygz-fg);
}

.ygz-card-body {
  padding: 14px;
  min-width: 0;
  overflow: visible; /* scroll ygz-grid-wrap'ta olur, body pasif */
}

.ygz-card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--ygz-border);
  background: var(--ygz-bg3);
}

/* Glass Card (Cam efekti - daha güçlü blur) */
.ygz-glass {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
html.dark .ygz-glass {
  background: rgba(22, 24, 32, 0.72) !important;
  border: 1px solid rgba(228, 229, 233, 0.08) !important;
}

/* Elevated Card */
.ygz-card-elevated {
  background: var(--ygz-card-elevated);
  border: 1px solid var(--ygz-border-subtle);
  border-radius: var(--ygz-radius-lg);
  box-shadow: var(--ygz-shadow-md);
  min-width: 0;
  max-width: 100%;
  transition: box-shadow var(--ygz-transition-normal), transform var(--ygz-transition-normal);
}

.ygz-card-elevated:hover {
  box-shadow: var(--ygz-shadow-lg);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 9b: FILTER PANEL & PAGE HEADER (Dashboard + Foy)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Foy sayfalarinda filtre header — theme-aware glassmorphism */
.ygz-filter-header {
  background: var(--ygz-bg2);
  border-bottom: 1px solid var(--ygz-border);
  padding: 4px 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}

@supports (backdrop-filter: blur(12px)) {
  .ygz-filter-header {
    background: color-mix(in srgb, var(--ygz-bg2) 85%, transparent);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
  }
}

/* Dashboard filtre paneli — grid layout */
.ygz-dash-filter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}

@media (min-width: 640px) {
  .ygz-dash-filter {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .ygz-dash-filter {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Filtre label stilleri */
.ygz-filter-label {
  display: none;
}

/* A11y: Screen-reader only label (form field label bind) */
.ygz-label-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hizli filtre butonlari (Gunluk/Haftalik/Aylik) */
.ygz-quick-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Stat Card - ikon konteyneri */
.ygz-stat-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ygz-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ygz-primary) 12%, transparent);
  color: var(--ygz-primary);
  flex-shrink: 0;
}

.ygz-stat-card__icon svg {
  width: 20px;
  height: 20px;
}

/* Stat card header (icon + label) */
.ygz-stat-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* Foy 3pane footer — theme-aware */
.ygz-filter-footer {
  background: var(--ygz-bg2);
  border-top: 1px solid var(--ygz-border);
  padding: 4px 12px;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

@supports (backdrop-filter: blur(12px)) {
  .ygz-filter-footer {
    background: color-mix(in srgb, var(--ygz-bg2) 85%, transparent);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
  }
}

/* Filter header scoped: input/buton kompakt boyutlar */
.ygz-filter-header .ygz-input {
  min-height: 28px;
  padding: 4px 8px;
}

.ygz-filter-header .ygz-btn {
  padding: 4px 10px;
  min-height: 28px;
}

/* Filter header scoped: Tailwind utility override — boşluk azalt */
.ygz-filter-header .mt-1 { margin-top: 2px; }
.ygz-filter-header .mt-2 { margin-top: 2px; }
.ygz-filter-header .gap-2 { gap: 4px; }
.ygz-filter-header .ygz-filter-label { margin-bottom: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 10: TABLOLAR (GRID)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 3-Panel Sayfa Layout
   main flex-col olduğu için flex:1 ile tam yükseklik alır.
   Scroll yalnızca .ygz-grid-viewport içinde olur,
   böylece thead th { position:sticky } düzgün çalışır. */
.ygz-page-3pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

.ygz-page-3pane__header {
  flex: 0 0 auto;
  background: var(--ygz-bg2);
  border-bottom: 1px solid var(--ygz-border);
}

.ygz-page-3pane__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* scroll ygz-grid-viewport'a aittir — overflow:hidden sticky'yi kırar */
}

.ygz-page-3pane__footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--ygz-border);
  padding-top: 0;
  margin-top: 0;
}

/* Strateji D — Header-only evraklarda orta panel gizli (3-pane → 2-pane).
   ygz-evrak-page.js init() yeni modül + headerOnly/linesPending tespit edince
   .ygz-page-3pane__body üzerine .is-hidden ekler ve <body>'ye .ygz-evrak-header-only sınıfı koyar. */
.ygz-page-3pane__body.is-hidden {
  display: none !important;
}

/* Body olmadan footer'ın header'a yapışmaması için minimal alan bırak. */
body.ygz-evrak-header-only .ygz-page-3pane__footer {
  margin-top: auto;
}

/* Grid Wrap — tablo taşırsa yatay scroll sağlar */
.ygz-grid-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Scrollbar her zaman görünsün (UX: kullanıcı kaydırabileceğini bilsin) */
.ygz-grid-wrap::-webkit-scrollbar { height: 6px; }
.ygz-grid-wrap::-webkit-scrollbar-track { background: var(--ygz-bg2); border-radius: 3px; }
.ygz-grid-wrap::-webkit-scrollbar-thumb { background: var(--ygz-border-strong); border-radius: 3px; }
.ygz-grid-wrap::-webkit-scrollbar-thumb:hover { background: var(--ygz-muted2); }
.ygz-grid-wrap { scrollbar-width: thin; scrollbar-color: var(--ygz-border-strong) var(--ygz-bg2); }

.ygz-grid-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Grid loading: JS init tamamlanana kadar etkileşimi engelle.
   data-ygz-grid-fixed="1" olan tablolar (lookup modal'lari) statik kabuk + dinamik tbody;
   ygz-grid.js JS init'ine bagli degil — CSS rule kapsami disinda (v4.66 fix). */
table.ygz-grid:not([data-ygz-grid-ready]):not([data-ygz-grid-fixed]) {
  pointer-events: none;
}

/* Grid loading spinner overlay — blur overlay uzerinde, tablo degil */
.ygz-grid-loading-indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
}
html.dark .ygz-grid-loading-indicator {
  background: rgba(0, 0, 0, 0.25);
}

/* Grid Table — fluid font-size */
table.ygz-grid {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ygz-fs-grid);
  border-radius: var(--ygz-radius-md);
  overflow: visible; /* overflow:hidden sticky'yi kırar — kaldırıldı */
}

table.ygz-grid th,
table.ygz-grid td {
  /* Kullanıcı isteği: Tablolardaki veriler wrap olabilir. */
  /* TBY: Global tablo satır yüksekliği kompakt olmalı.
     v4.77: padding 8px 12px → 4px 10px, line-height 1.3 → 1.2 (TBY: "satir
     yukseklikleri cok fazla"). Yeni satir yuksekligi ~26-28px (eski ~36px) —
     yogun veri tablolarinda (Foy 17+ satir) ekran sigmasi artirildi.
     Mobil tap-target (44px) yoksa mouse hedefi yine yeterli.) */
  padding: 4px 10px;
  line-height: 1.2;
  border-bottom: 1px solid var(--ygz-border-subtle);
  border-right: 1px solid var(--ygz-border-subtle);
  text-align: left;
}

/* Header tek satır kalsın (UI stabil) */
table.ygz-grid th {
  white-space: nowrap;
}

/* Body hücrelerinde wrap açık (uzun metinler satıra sığsın) */
table.ygz-grid td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Sayısal hücreler mümkünse tek satır kalsın */
table.ygz-grid td[align="right"],
table.ygz-grid td[style*="text-align:right"],
table.ygz-grid td[style*="text-align: right"],
table.ygz-grid td[style*="text-align:Right"],
table.ygz-grid td[style*="text-align: Right"],
table.ygz-grid td.text-right,
table.ygz-grid td.whitespace-nowrap {
  white-space: nowrap;
}

/* Grid column hide (inline style YOK) */
table.ygz-grid th.ygz-grid-col--hidden,
table.ygz-grid td.ygz-grid-col--hidden {
  display: none !important;
}

/* Not: Sadece TD/TH gizlemek yetmez; colgroup <col> width'leri bazen boşluk bırakabilir.
   Bu yüzden col elemanını da gizliyoruz. */
table.ygz-grid col.ygz-grid-col--hidden {
  display: none !important;
  width: 0 !important;
}

table.ygz-grid th:last-child,
table.ygz-grid td:last-child {
  border-right: none;
}

/* Stored widths fixed layout
   v4.75 fix: width: 100% + max-width: 100% kolon genisliklerini parent'a
   squeeze ediyordu ("Otomatik" 520px'e kadar hesaplasa bile fixed mode 100%
   zorluyor → kolonlar daraltilir, ellipsis erken devreye girer).
   v4.76 fix (TBY): `min-width: 100%` kaldirildi — bilinçli daraltmada parent'a
   100% zorlamak kullanicinin manuel resize'ina engel oluyordu (table-layout:
   fixed, width zorlu 100% → fazla pixel'ler proportional dagitiliyor, daraltma
   anlamsiz). Yeni davranis: tablo storage widths sum kadar genis (`max-content`);
   parent'tan kucukse sag tarafta bos alan kalir (kabul edilebilir UX); buyukse
   `.ygz-grid-wrap` overflow-x: auto ile yatay scroll. */
table.ygz-grid[data-ygz-grid-fixed="1"] {
  table-layout: fixed;
  width: max-content;
  max-width: none;
}

/* v4.75: AutoFit olcum modu — JS autoFitColumns scrollWidth okumadan once
   bu class'i ekler; td'ler tek satira zorlanir, dogru genislik olculur.
   Olcum sonrasi class kaldirilir; fixed mode aktif olunca td nowrap kalir
   (line 1808-1814 ile uyumlu). */
table.ygz-grid.ygz-grid-measuring th,
table.ygz-grid.ygz-grid-measuring td {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Fixed layout: kullanıcı sütunu sürükleyerek daralttığında içerik WRAP olur
 * (TBY 2026-05-12). Eski davranış: nowrap + ellipsis → metin "…" ile kesiliyordu.
 * Yeni davranış: white-space normal + overflow-wrap anywhere → uzun stok kodları
 * dahil hepsi alt satıra geçer, satır yüksekliği içeriğe göre büyür. min-width: 0
 * → kullanıcı istediği kadar daraltabilsin. */
table.ygz-grid[data-ygz-grid-fixed="1"] th,
table.ygz-grid[data-ygz-grid-fixed="1"] td {
  overflow: hidden;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* v3.7 (Faz 5): Truncate opt-in — tablolara data-ygz-grid-overflow="truncate"
 * eklenirse wrap yerine tek-satır ellipsis. JS rebuildTable sonrası dolu cell'lere
 * scrollWidth > clientWidth durumunda ygz-tooltip + data-ygz-tooltip enjekte
 * eder (hover-tooltip ile tam metni gösterir). Default davranış: wrap (v3.2).
 *
 * v3.8 (Faz 5.1) max-width: 1px — CRITICAL table-cell quirk: tablo
 * width:max-content + table-layout:fixed kombinasyonunda cell content'in
 * min-content genişliği col rule'u eziyordu (browser cell text 593 px talep
 * edince col:nth-child{width:250px} ignore ediliyordu). max-width:1px cell'in
 * kendi width talebini sıfırlar → col rule respect edilir, ellipsis aktive
 * olur. Yaygın CSS workaround. */
table.ygz-grid[data-ygz-grid-fixed="1"][data-ygz-grid-overflow="truncate"] td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: ellipsis;
  max-width: 1px;
}

/* Header — ygz-grid-header class (ASP.NET GridView HeaderStyle-CssClass) */
table.ygz-grid thead th,
table.ygz-grid thead tr.ygz-grid-header th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ygz-table-header-bg);
  color: var(--ygz-muted);
  font-weight: 600;
  font-size: var(--ygz-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -1px 0 var(--ygz-border);
}

/* Row — ygz-grid-row class (ASP.NET GridView RowStyle-CssClass) */
table.ygz-grid tbody tr.ygz-grid-row {
  border-top: 1px solid var(--ygz-border-subtle);
}

html.dark table.ygz-grid thead th {
  background: var(--ygz-table-header-bg);
}

/* Body Rows */
table.ygz-grid tbody tr:nth-child(odd) td {
  background: var(--ygz-table-row-odd);
}

table.ygz-grid tbody tr:nth-child(even) td {
  background: var(--ygz-table-row-even);
}

table.ygz-grid tbody tr {
  transition: background var(--ygz-transition-fast);
}

table.ygz-grid tbody tr:hover td {
  background: var(--ygz-table-row-hover) !important;
}

table.ygz-grid tbody tr:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Row Colors (Evrak tipi) */
table.ygz-grid tbody tr.ygz-rowcolor-0 td { background-color: var(--ygz-table-row-odd) !important; }
table.ygz-grid tbody tr.ygz-rowcolor-1 td { background-color: var(--ygz-rowcolor-1-bg) !important; }
table.ygz-grid tbody tr.ygz-rowcolor-2 td { background-color: var(--ygz-rowcolor-2-bg) !important; }
table.ygz-grid tbody tr.ygz-rowcolor-3 td { background-color: var(--ygz-rowcolor-3-bg) !important; }
table.ygz-grid tbody tr.ygz-rowcolor-4 td { background-color: var(--ygz-rowcolor-4-bg) !important; }
table.ygz-grid tbody tr.ygz-rowcolor-5 td { background-color: var(--ygz-rowcolor-5-bg) !important; }

/* Semantik Satır Tonları (Evrak tipi + normal/iade + giriş/çıkış) */
table.ygz-grid tbody tr.ygz-rowtone-neutral td { background-color: var(--ygz-tone-neutral-bg) !important; }
table.ygz-grid tbody tr.ygz-rowtone-in td { background-color: var(--ygz-tone-in-bg) !important; }
table.ygz-grid tbody tr.ygz-rowtone-out td { background-color: var(--ygz-tone-out-bg) !important; }
table.ygz-grid tbody tr.ygz-rowtone-transfer td { background-color: var(--ygz-tone-transfer-bg) !important; }
table.ygz-grid tbody tr.ygz-rowtone-return td { background-color: var(--ygz-tone-return-bg) !important; }

/* Teslimat Evrakı: satır teslim durumları */
table.ygz-grid tbody tr.ygz-delivery-none td { background-color: var(--ygz-danger-bg) !important; }
table.ygz-grid tbody tr.ygz-delivery-partial td { background-color: var(--ygz-warning-bg) !important; }
table.ygz-grid tbody tr.ygz-delivery-full td { background-color: var(--ygz-success-bg) !important; }

/* Teslimat: td içindeki input/select elementlerine de aynı rengi uygula (opak .ygz-input bg'yi override et) */
table.ygz-grid tbody tr.ygz-delivery-none td .ygz-input,
table.ygz-grid tbody tr.ygz-delivery-none td select { background-color: var(--ygz-danger-bg) !important; }
table.ygz-grid tbody tr.ygz-delivery-partial td .ygz-input,
table.ygz-grid tbody tr.ygz-delivery-partial td select { background-color: var(--ygz-warning-bg) !important; }
table.ygz-grid tbody tr.ygz-delivery-full td .ygz-input,
table.ygz-grid tbody tr.ygz-delivery-full td select { background-color: var(--ygz-success-bg) !important; }

table.ygz-grid tbody tr.ygz-delivery-none td:first-child { box-shadow: inset 3px 0 0 0 var(--ygz-danger); }
table.ygz-grid tbody tr.ygz-delivery-partial td:first-child { box-shadow: inset 3px 0 0 0 var(--ygz-warning); }
table.ygz-grid tbody tr.ygz-delivery-full td:first-child { box-shadow: inset 3px 0 0 0 var(--ygz-success); }

/* Teslimat Görselleri: satır bazlı görsel ekleri hücresi (sthUid + seri/sıra) */
table.ygz-grid tbody tr td.ygz-gorsel-td { white-space: normal; min-width: 9rem; }
.ygz-gorsel-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.ygz-gorsel-link { font-size: 0.75rem; color: var(--ygz-brand); text-decoration: underline; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ygz-gorsel-link:hover { opacity: 0.85; }
.ygz-gorsel-pending { font-size: 0.72rem; opacity: 0.85; display: inline-flex; align-items: center; gap: 0.25rem; }
.ygz-gorsel-remove { border: none; background: transparent; color: var(--ygz-danger); cursor: pointer; font-size: 0.72rem; line-height: 1; padding: 0 0.15rem; }
.ygz-gorsel-remove:hover { opacity: 0.8; }
.ygz-gorsel-add { border: 1px solid var(--ygz-brand); background: transparent; color: var(--ygz-brand); cursor: pointer; font-size: 0.72rem; padding: 0.15rem 0.45rem; border-radius: 0.3rem; white-space: nowrap; }
.ygz-gorsel-add:hover { background: var(--ygz-brand); color: #fff; }
.ygz-gorsel-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; }
.ygz-gorsel-desc { font-size: 0.68rem; opacity: 0.65; line-height: 1.2; max-width: 12rem; word-break: break-word; white-space: normal; }

/* UX: satır tonunda sol accent çizgi (dark/light uyumlu) */
table.ygz-grid tbody tr.ygz-rowtone-in td:first-child,
table.ygz-grid tbody tr.ygz-rowtone-out td:first-child,
table.ygz-grid tbody tr.ygz-rowtone-transfer td:first-child,
table.ygz-grid tbody tr.ygz-rowtone-return td:first-child,
table.ygz-grid tbody tr.ygz-rowtone-neutral td:first-child {
  box-shadow: inset 3px 0 0 0 var(--ygz-border-strong);
}
table.ygz-grid tbody tr.ygz-rowtone-in td:first-child { box-shadow: inset 3px 0 0 0 var(--ygz-success); }
table.ygz-grid tbody tr.ygz-rowtone-out td:first-child { box-shadow: inset 3px 0 0 0 var(--ygz-danger); }
table.ygz-grid tbody tr.ygz-rowtone-transfer td:first-child { box-shadow: inset 3px 0 0 0 var(--ygz-accent); }
table.ygz-grid tbody tr.ygz-rowtone-return td:first-child { box-shadow: inset 3px 0 0 0 var(--ygz-warning); }

/* Footer — th de td gibi sticky kalmalı (dashboard buildTable th üretiyor). */
table.ygz-grid tfoot td,
table.ygz-grid tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: var(--ygz-table-header-bg);
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--ygz-border);
}

/* Column Selection */
.ygz-grid-th {
  position: relative;
}

.ygz-grid-th--selected {
  outline: 2px solid var(--ygz-primary);
  outline-offset: -2px;
  background: var(--ygz-primary-ghost);
}

/* Row Number Column */
table.ygz-grid .ygz-grid-th--rowno,
table.ygz-grid .ygz-grid-td--rowno {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
  font-family: var(--ygz-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--ygz-muted2);
}

/* Resize Handle */
.ygz-grid-resizer {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 8px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

.ygz-grid-resizer::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: var(--ygz-border-strong);
  border-radius: 1px;
  opacity: 0;
  transition: opacity var(--ygz-transition-fast);
}

.ygz-grid-th:hover .ygz-grid-resizer::after {
  opacity: 1;
}

.ygz-grid-resizing,
.ygz-grid-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Sorted/Filtered Icons — sort hala simge, filtre artik chip */
table.ygz-grid th.ygz-grid-th--sorted-asc::after {
  content: " ↑";
  font-weight: 700;
  color: var(--ygz-primary);
}

table.ygz-grid th.ygz-grid-th--sorted-desc::after {
  content: " ↓";
  font-weight: 700;
  color: var(--ygz-primary);
}

/* Filtreli sutun chip indikatoru — header altinda "Tip: Fatura X" benzeri */
.ygz-grid-th__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ygz-success);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  max-width: 220px;
  overflow: hidden;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ygz-grid-th__chip-label {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ygz-grid-th__chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.20);
  font-size: 9px;
  cursor: pointer;
  transition: background 120ms ease;
}

.ygz-grid-th__chip-close:hover {
  background: rgba(0, 0, 0, 0.40);
}

/* Grid Footer (External totals) */
.ygz-grid-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.ygz-grid-footer__title {
  font-size: var(--ygz-fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ygz-muted);
  margin-right: auto;
}

.ygz-grid-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--ygz-radius-md);
  border: 1px solid var(--ygz-border);
  background: var(--ygz-card);
}

.ygz-grid-chip__k {
  font-size: var(--ygz-fs-chip-key);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ygz-muted2);
}

.ygz-grid-chip__v {
  font-size: var(--ygz-fs-chip-val);
  font-weight: 800;
  font-family: var(--ygz-font-mono);
  color: var(--ygz-fg);
}

/* Grid Total Cell */
.ygz-grid-total-cell {
  border-top: 2px solid var(--ygz-border-strong);
  background: var(--ygz-table-header-bg);
  font-weight: 700;
}

.ygz-grid-total-cell--num {
  text-align: right;
  font-family: var(--ygz-font-mono);
}

.ygz-grid-total-cell--icon {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 11: GRID MENÜ (POPOVER)
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-grid-menu {
  position: fixed;
  /* Not: Lookup popupları (ygz-modal) z-index=101. Grid menüsü modal içinde de görünmeli. */
  z-index: 1200;
  width: min(340px, 90vw);
}

.ygz-grid-menu.hidden {
  display: none;
}

.ygz-grid-menu__card {
  border: 1px solid var(--ygz-border);
  background: var(--ygz-card);
  color: var(--ygz-fg);
  border-radius: var(--ygz-radius-lg);
  box-shadow: var(--ygz-shadow-xl);
  padding: 18px;
  animation: ygz-modal-enter 0.2s ease-out;
}

.ygz-grid-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ygz-grid-menu__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ygz-grid-menu__title {
  font-weight: 700;
  font-size: var(--ygz-fs-base);
}

.ygz-grid-menu__close {
  padding: 6px 10px;
  border-radius: var(--ygz-radius-md);
  font-size: var(--ygz-fs-sm);
}

.ygz-grid-menu__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ygz-grid-menu__num {
  margin-top: 12px;
}

.ygz-grid-menu__numrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ygz-grid-menu__search {
  margin-top: 12px;
}

.ygz-grid-menu__input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--ygz-radius-md);
  border: 1px solid var(--ygz-input-border);
  background: var(--ygz-input-bg);
  color: var(--ygz-input-fg);
  font-size: var(--ygz-fs-input);
}

.ygz-grid-menu__values {
  margin-top: 12px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--ygz-border);
  border-radius: var(--ygz-radius-md);
  padding: 4px;
}

.ygz-grid-menu__value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--ygz-radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--ygz-transition-fast);
}

.ygz-grid-menu__value:hover {
  background: var(--ygz-primary-ghost);
}

/* Grid visibility helpers (inline style YOK) */
table.ygz-grid tbody tr.ygz-grid-row--hidden {
  display: none;
}
table.ygz-grid tfoot tr.ygz-grid-row--hidden {
  display: none;
}
.ygz-grid-menu .ygz-grid-menu-row--hidden {
  display: none;
}

.ygz-grid-menu__value-text {
  font-size: var(--ygz-fs-sm);
  color: var(--ygz-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ygz-grid-menu__footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* Foy infinite scroll: bilgi bari + sentinel */
.ygz-foy-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  gap: 8px;
}
.ygz-foy-pagination-bar__info {
  font-size: var(--ygz-fs-xs);
  color: var(--ygz-muted2);
  user-select: none;
}
.ygz-foy-scroll-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 12: TEXT HELPERS
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-muted { color: var(--ygz-muted) !important; }
.ygz-muted2 { color: var(--ygz-muted2) !important; }
.ygz-muted3 { color: var(--ygz-muted3) !important; }

.ygz-text-primary { color: var(--ygz-primary) !important; }
.ygz-text-success { color: var(--ygz-success) !important; }
.ygz-text-danger { color: var(--ygz-danger) !important; }
.ygz-text-warning { color: var(--ygz-warning) !important; }
.ygz-text-info { color: var(--ygz-info) !important; }

/* ═══ Utility helpers (inline style yerine) ═══ */
.ygz-hidden { display: none !important; }
.ygz-cursor-pointer { cursor: pointer; }

/* Theme-aware link */
.ygz-link {
  color: var(--ygz-primary);
  text-decoration: none;
  transition: color 150ms ease;
}
.ygz-link:hover { color: var(--ygz-primary-hover, var(--ygz-primary)); opacity: .85; }

/* Generic alert wrapper (theme-aware border + bg) */
.ygz-alert {
  border: 1px solid var(--ygz-border);
  background: var(--ygz-surface);
}

/* ── Audit / Değişiklik Hikayesi ── */
.ygz-alert--error {
  border-color: var(--ygz-danger);
  background: color-mix(in oklab, var(--ygz-danger) 8%, var(--ygz-bg2));
  color: var(--ygz-danger);
}

.ygz-audit-label {
  font-size: var(--ygz-fs-sm);
  font-weight: 600;
  color: var(--ygz-fg-secondary);
}

.ygz-audit-value {
  border-radius: var(--ygz-radius-md);
  border: 1px solid var(--ygz-border);
  background: var(--ygz-bg2);
  padding: 8px;
}

.ygz-audit-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--ygz-border);
  background: var(--ygz-bg2);
  font-size: var(--ygz-fs-sm);
  color: var(--ygz-fg);
}

.ygz-audit-chip--link {
  border-color: color-mix(in oklab, var(--ygz-info) 30%, transparent);
  background: color-mix(in oklab, var(--ygz-info) 8%, var(--ygz-bg2));
  color: var(--ygz-info);
  text-decoration: none;
  transition: background var(--ygz-transition-fast);
}

.ygz-audit-chip--link:hover {
  background: color-mix(in oklab, var(--ygz-info) 15%, var(--ygz-bg2));
}

.ygz-audit-tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 20;
  max-width: 280px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--ygz-radius-md);
  border: 1px solid var(--ygz-border);
  background: var(--ygz-bg2);
  font-size: 12px;
  color: var(--ygz-fg);
  box-shadow: var(--ygz-shadow-md);
}

.group:hover .ygz-audit-tooltip {
  display: block;
}

/* Audit: satır (hareket) ayracı — aynı SourceTable içindeki bireysel DB satırları */
.ygz-audit-row-batches {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ygz-audit-row-batch {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 4px 6px;
  border-radius: var(--ygz-radius-sm);
  border: 1px solid color-mix(in oklab, var(--ygz-border) 60%, transparent);
  background: color-mix(in oklab, var(--ygz-bg) 50%, var(--ygz-bg2));
}

.ygz-audit-row-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--ygz-brand) 15%, var(--ygz-bg2));
  border: 1px solid color-mix(in oklab, var(--ygz-brand) 30%, transparent);
  font-size: 10px;
  font-weight: 600;
  color: var(--ygz-brand);
  margin-top: 1px;
}

/* ── Audit: Alan Siniflandirma (v0.7) ────────── */
.ygz-audit-derived {
  margin-top: 4px;
  border-radius: var(--ygz-radius-sm);
  border: 1px dashed color-mix(in oklab, var(--ygz-border) 40%, transparent);
}
.ygz-audit-derived > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--ygz-muted);
  padding: 3px 8px;
  user-select: none;
  list-style: none;
}
.ygz-audit-derived > summary::-webkit-details-marker {
  display: none;
}
.ygz-audit-derived > summary::before {
  content: "\25B8 ";
  font-size: 10px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.ygz-audit-derived[open] > summary::before {
  content: "\25BE ";
}
.ygz-audit-derived > .ygz-audit-derived-content {
  padding: 4px 8px 6px;
  opacity: 0.8;
}

.ygz-text-xs { font-size: 10px; }
.ygz-text-sm { font-size: 12px; }
.ygz-text-md { font-size: 14px; }
.ygz-text-lg { font-size: 16px; }
.ygz-text-xl { font-size: 20px; }
.ygz-text-2xl { font-size: 24px; }

.ygz-font-normal { font-weight: 400; }
.ygz-font-medium { font-weight: 500; }
.ygz-font-semibold { font-weight: 600; }
.ygz-font-bold { font-weight: 700; }
.ygz-font-extrabold { font-weight: 800; }

.ygz-font-mono { font-family: var(--ygz-font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 13: TREND BAR / PROGRESS
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-trend-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ygz-border);
  overflow: hidden;
}

.ygz-trend-fill {
  height: 6px;
  background: var(--ygz-primary);
  transition: width var(--ygz-transition-normal);
}

/* Width Helpers */
.ygz-bar-w-0 { width: 0% !important; }
.ygz-bar-w-10 { width: 10% !important; }
.ygz-bar-w-20 { width: 20% !important; }
.ygz-bar-w-30 { width: 30% !important; }
.ygz-bar-w-40 { width: 40% !important; }
.ygz-bar-w-50 { width: 50% !important; }
.ygz-bar-w-60 { width: 60% !important; }
.ygz-bar-w-70 { width: 70% !important; }
.ygz-bar-w-80 { width: 80% !important; }
.ygz-bar-w-90 { width: 90% !important; }
.ygz-bar-w-100 { width: 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 14: BADGES & TAGS
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--ygz-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 9999px;
  background: var(--ygz-border);
  color: var(--ygz-fg);
}

.ygz-badge-primary {
  background: var(--ygz-primary-ghost);
  color: var(--ygz-primary);
}

.ygz-badge-success {
  background: var(--ygz-success-bg);
  color: var(--ygz-success);
}

.ygz-badge-danger {
  background: var(--ygz-danger-bg);
  color: var(--ygz-danger);
}

.ygz-badge-warning {
  background: var(--ygz-warning-bg);
  color: var(--ygz-warning);
}

.ygz-badge-info {
  background: var(--ygz-info-bg);
  color: var(--ygz-info);
}

/* Tooltip */
.ygz-tooltip {
  position: relative;
}

.ygz-tooltip::after {
  content: attr(data-ygz-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  font-size: var(--ygz-fs-sm);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ygz-secondary-contrast);
  background: var(--ygz-secondary);
  border-radius: var(--ygz-radius-sm);
  box-shadow: var(--ygz-shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ygz-transition-fast);
}

.ygz-tooltip:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 15: POPUP / MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.52);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  z-index: 100;
  animation: ygz-fade-in 0.2s ease-out;
}

html.dark .ygz-modal-backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.ygz-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  max-width: min(90vw, 1400px);
  max-height: 90vh;
  overflow: auto;
  background: var(--ygz-card);
  border: 1px solid var(--ygz-border);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 1px 3px rgba(10, 22, 40, 0.04),
    0 4px 16px rgba(10, 22, 40, 0.08),
    0 12px 40px rgba(10, 22, 40, 0.12);
  animation: ygz-modal-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .ygz-modal {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.20),
    0 12px 40px rgba(0, 0, 0, 0.28);
  border-color: var(--ygz-border-strong);
}

@keyframes ygz-modal-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 768px) {
  .ygz-modal {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 12px;
  }
}

.ygz-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--ygz-border-subtle);
  background: rgba(255, 255, 255, 0.4);
}

html.dark .ygz-modal-header {
  background: rgba(255, 255, 255, 0.02);
}

.ygz-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ygz-fg);
  letter-spacing: -0.01em;
}

/* Modal close button — circle shape */
.ygz-modal-header .ygz-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ygz-transition-fast);
}
.ygz-modal-header .ygz-icon-btn:hover {
  background: var(--ygz-danger-bg);
  color: var(--ygz-danger);
}

.ygz-modal-body {
  padding: 24px;
}

.ygz-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--ygz-border-subtle);
  background: var(--ygz-bg3);
}

/* ── Dışa Aktarma: çoklu tasarım listesi (format=Yazdır) ─────────────── */
/* --ygz-border / --ygz-brand-muted / --ygz-brand değişkenleri html.dark
   altında yeniden tanımlı → liste light/dark temaya otomatik uyar. */
.ygz-disa-tasarim-multi {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--ygz-border, #d1d5db);
    border-radius: 0.75rem;
    padding: 0.375rem;
}
.ygz-disa-tasarim-multi-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}
.ygz-disa-tasarim-multi-row:hover {
    background: var(--ygz-brand-muted, rgba(212, 160, 23, 0.08));
}
.ygz-disa-tasarim-multi-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ygz-disa-tasarim-multi-default {
    margin-left: auto;
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: var(--ygz-brand, #D4A017);
    color: #fff;
}

/* XML tab — elle düzenleme rozeti */
.ygz-disa-xml-dirty {
    font-size: 0.6875rem;
    color: var(--ygz-brand, #D4A017);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BOLUM 15b: MESAJLASMA — Yeniden Tasarim v4.0
   Modern WhatsApp benzeri mesajlasma paneli
   Glass morphism, avatar sistemi, balon tail'leri, animasyonlar
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Mesajlasma CSS Degiskenleri ─── */
:root {
  --ygz-msg-glass-bg: rgba(255, 255, 255, 0.55);
  --ygz-msg-glass-blur: 14px;
  --ygz-msg-glass-border: rgba(255, 255, 255, 0.25);
  --ygz-msg-sent-gradient: linear-gradient(135deg, var(--ygz-brand) 0%, var(--ygz-brand-light) 100%);
  --ygz-msg-recv-bg: var(--ygz-bg3);
  --ygz-msg-avatar-size-xs: 28px;
  --ygz-msg-avatar-size-sm: 36px;
  --ygz-msg-avatar-size-md: 40px;
  --ygz-msg-bubble-radius: 18px;
  --ygz-msg-tail-size: 7px;
  --ygz-msg-anim-duration: 0.25s;
  --ygz-msg-anim-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

html.dark {
  --ygz-msg-glass-bg: rgba(16, 17, 20, 0.65);
  --ygz-msg-glass-blur: 18px;
  --ygz-msg-glass-border: rgba(255, 255, 255, 0.08);
  --ygz-msg-sent-gradient: linear-gradient(135deg, var(--ygz-brand-dark) 0%, var(--ygz-brand) 100%);
  --ygz-msg-recv-bg: var(--ygz-bg3);
}

/* ─── 1. Modal ─── */
.ygz-msg-modal {
  width: clamp(420px, 88vw, 1000px);
  height: clamp(500px, 80vh, 720px);
  max-width: 95vw;
  max-height: 85vh;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 4px 6px rgba(10, 22, 40, 0.02),
    0 12px 24px rgba(10, 22, 40, 0.06),
    0 24px 48px rgba(10, 22, 40, 0.08),
    0 0 0 1px rgba(10, 22, 40, 0.04);
  animation: ygz-msg-modal-in var(--ygz-msg-anim-duration) var(--ygz-msg-anim-easing) both;
}

html.dark .ygz-msg-modal {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.16),
    0 24px 48px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

@keyframes ygz-msg-modal-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ─── 2. Body: flex layout (sol sidebar + sag chat) ─── */
.ygz-msg-body {
  display: flex;
  padding: 0 !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── 3. Sol Panel: Konusma Listesi (Sidebar) ─── */
.ygz-msg-sidebar {
  width: clamp(200px, 30%, 280px);
  min-width: 0;
  flex-shrink: 0;
  border-right: none;
  box-shadow: 2px 0 12px rgba(10, 22, 40, 0.06);
  display: flex;
  flex-direction: column;
  background: var(--ygz-msg-glass-bg);
  backdrop-filter: blur(var(--ygz-msg-glass-blur));
  -webkit-backdrop-filter: blur(var(--ygz-msg-glass-blur));
  border-right: 1px solid var(--ygz-msg-glass-border);
}

html.dark .ygz-msg-sidebar {
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
}

/* ─── 3a. Arama ─── */
.ygz-msg-search {
  padding: 10px;
  border-bottom: 1px solid var(--ygz-border);
}

/* Arama wrapper: ikon + input */
.ygz-msg-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ygz-msg-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ygz-muted2);
  pointer-events: none;
  flex-shrink: 0;
}

.ygz-msg-search-wrap input {
  padding-left: 34px !important;
  width: 100%;
}

/* ─── 3b. Konusma Listesi ─── */
.ygz-msg-conv-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Konusma satiri */
.ygz-msg-conv-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--ygz-border-subtle);
  transition: all var(--ygz-transition-fast);
  position: relative;
  animation: ygz-msg-conv-fadein 0.3s ease both;
}

@keyframes ygz-msg-conv-fadein {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

.ygz-msg-conv-item:hover {
  background: var(--ygz-primary-ghost);
  transform: scale(1.01);
}

.ygz-msg-conv-item.active {
  background: var(--ygz-primary-ghost);
  border-left: none;
}

/* Active state: gradient accent bar on left */
.ygz-msg-conv-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ygz-brand) 0%, var(--ygz-brand-light) 100%);
  border-radius: 0 4px 4px 0;
}

/* Konusma satiri: flex row layout (avatar + info) */
.ygz-msg-conv-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ygz-msg-conv-info {
  flex: 1;
  min-width: 0;
}

/* Konusma satiri header row: isim (sol) + tarih (sag) */
.ygz-msg-conv-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

/* Konusma satiri footer row: preview (sol) + badge (sag) */
.ygz-msg-conv-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ygz-msg-conv-name {
  font-weight: 600;
  font-size: var(--ygz-fs-base);
  color: var(--ygz-fg);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.ygz-msg-conv-preview {
  font-size: var(--ygz-fs-sm);
  color: var(--ygz-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ygz-msg-conv-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.ygz-msg-conv-date {
  font-size: 10px;
  color: var(--ygz-muted2);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Konusma badge: pill shape + pulse */
.ygz-msg-conv-badge {
  background: var(--ygz-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  line-height: 1.4;
  min-width: 20px;
  text-align: center;
  animation: ygz-msg-badge-bounce 0.4s var(--ygz-msg-anim-easing);
}

@keyframes ygz-msg-badge-bounce {
  0%   { transform: scale(0.6); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.ygz-msg-conv-grup {
  font-size: 10px;
  font-weight: 400;
  color: var(--ygz-muted);
  background: var(--ygz-bg2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  display: inline-block;
  vertical-align: middle;
}

/* ─── 4. Avatar Sistemi ─── */
.ygz-msg-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative;
  user-select: none;
  line-height: 1;
}

.ygz-msg-avatar--xs {
  width: var(--ygz-msg-avatar-size-xs);
  height: var(--ygz-msg-avatar-size-xs);
  font-size: 11px;
}

.ygz-msg-avatar--sm {
  width: var(--ygz-msg-avatar-size-sm);
  height: var(--ygz-msg-avatar-size-sm);
  font-size: 13px;
}

.ygz-msg-avatar--md {
  width: var(--ygz-msg-avatar-size-md);
  height: var(--ygz-msg-avatar-size-md);
  font-size: 15px;
}

/* Avatar renk paleti: data-color attribute ile */
.ygz-msg-avatar[data-color="0"] { background: #6366f1; }
.ygz-msg-avatar[data-color="1"] { background: #8b5cf6; }
.ygz-msg-avatar[data-color="2"] { background: #ec4899; }
.ygz-msg-avatar[data-color="3"] { background: #f59e0b; }
.ygz-msg-avatar[data-color="4"] { background: #10b981; }
.ygz-msg-avatar[data-color="5"] { background: #06b6d4; }
.ygz-msg-avatar[data-color="6"] { background: #f97316; }
.ygz-msg-avatar[data-color="7"] { background: #ef4444; }

/* Online dot overlay: avatar uzerinde sag-alt */
.ygz-msg-avatar .ygz-msg-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  margin: 0;
}

html.dark .ygz-msg-avatar .ygz-msg-online-dot {
  border-color: var(--ygz-bg2);
}

/* ─── 5. Sag Panel: Mesaj Alani (Chat) ─── */
.ygz-msg-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Chat Header: taller, gradient border */
.ygz-msg-chat-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  min-height: 56px;
  border-bottom: none;
  background: var(--ygz-msg-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 600;
  font-size: 14px;
  color: var(--ygz-fg);
  gap: 10px;
  position: relative;
}

.ygz-msg-chat-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ygz-border) 20%, var(--ygz-border) 80%, transparent 100%);
}

html.dark .ygz-msg-chat-header {
  background: rgba(16, 17, 20, 0.5);
}

/* Chat header info */
.ygz-msg-chat-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.ygz-msg-chat-header-info > span:first-child,
.ygz-msg-chat-header-info > strong:first-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--ygz-fg);
}

.ygz-msg-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── 6. Mesaj Balonlari ─── */
.ygz-msg-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: var(--ygz-msg-bubble-radius);
  font-size: var(--ygz-fs-base);
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 2px 6px rgba(10, 22, 40, 0.04);
  animation: ygz-msg-bubble-in var(--ygz-msg-anim-duration) var(--ygz-msg-anim-easing) both;
  position: relative;
}

html.dark .ygz-msg-bubble {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.1);
}

@keyframes ygz-msg-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Gonderilen mesaj balonu */
.ygz-msg-bubble--sent {
  align-self: flex-end;
  background: var(--ygz-msg-sent-gradient);
  color: #fff;
  border-bottom-right-radius: 6px;
  margin-right: var(--ygz-msg-tail-size);
}

/* Sent tail */
.ygz-msg-bubble--sent::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: calc(var(--ygz-msg-tail-size) * -1);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--ygz-msg-tail-size) 0 0 var(--ygz-msg-tail-size);
  border-color: transparent transparent transparent var(--ygz-brand);
}

html.dark .ygz-msg-bubble--sent {
  color: var(--ygz-primary-contrast);
}

html.dark .ygz-msg-bubble--sent::after {
  border-color: transparent transparent transparent var(--ygz-brand-dark);
}

/* Alinan mesaj balonu */
.ygz-msg-bubble--recv {
  align-self: flex-start;
  background: var(--ygz-msg-recv-bg);
  color: var(--ygz-fg);
  border-bottom-left-radius: 6px;
  margin-left: var(--ygz-msg-tail-size);
}

/* Recv tail */
.ygz-msg-bubble--recv::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--ygz-msg-tail-size) * -1);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 var(--ygz-msg-tail-size) var(--ygz-msg-tail-size);
  border-color: transparent transparent var(--ygz-msg-recv-bg) transparent;
}

html.dark .ygz-msg-bubble--recv {
  background: var(--ygz-msg-recv-bg);
}

html.dark .ygz-msg-bubble--recv::after {
  border-color: transparent transparent var(--ygz-msg-recv-bg) transparent;
}

/* Mesaj balon row: avatar + bubble (alinan mesajlar icin) */
.ygz-msg-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ygz-msg-bubble-row .ygz-msg-bubble {
  align-self: auto;
}

/* Zaman ve tiklar */
.ygz-msg-bubble-time {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ─── 7. Mesaj Icindeki Linkler ─── */
.ygz-msg-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-all;
  transition: opacity 0.15s ease;
}
.ygz-msg-link:hover {
  opacity: 0.8;
}
.ygz-msg-bubble--sent .ygz-msg-link {
  color: #fff;
}
.ygz-msg-bubble--recv .ygz-msg-link {
  color: var(--ygz-accent);
}
html.dark .ygz-msg-bubble--recv .ygz-msg-link {
  color: var(--ygz-accent2);
}

/* ─── 7b. Mesaj Balon Metin Alani ─── */
.ygz-msg-bubble-text {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Balon icindeki gorsel onizleme: bubble genisligine sigdir */
.ygz-msg-bubble-text .ygz-msg-img-link {
  max-width: 100%;
}

.ygz-msg-bubble-text .ygz-msg-inline-img {
  max-width: 100%;
}

/* ─── 8. Gorsel Onizleme ─── */
.ygz-msg-img-link {
  display: block;
  margin: 6px 0;
  line-height: 0;
}
.ygz-msg-inline-img {
  max-width: 280px;
  max-height: 200px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.05);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ygz-msg-inline-img:hover {
  opacity: 0.9;
  transform: scale(1.01);
}
html.dark .ygz-msg-inline-img {
  background: rgba(255, 255, 255, 0.05);
}

/* ─── 9. Input Alani ─── */
.ygz-msg-chat-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ygz-border-subtle);
  align-items: flex-end;
  background: var(--ygz-msg-glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html.dark .ygz-msg-chat-input {
  background: rgba(16, 17, 20, 0.4);
}

.ygz-msg-chat-input textarea {
  flex: 1;
  resize: none;
  border-radius: 24px;
  padding: 10px 16px;
}

/* Send button — circular gradient */
.ygz-msg-chat-input .ygz-btn-primary,
.ygz-msg-chat-input .ygz-msg-send-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ygz-msg-sent-gradient);
  border: none;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(212, 160, 23, 0.25);
}

.ygz-msg-chat-input .ygz-btn-primary:hover,
.ygz-msg-chat-input .ygz-msg-send-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(212, 160, 23, 0.35);
}

/* ─── 10. Mesaj Butonu Badge ─── */
#btnMesajAc {
  position: relative;
}

.ygz-msg-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  animation: ygz-msg-badge-bounce 0.4s var(--ygz-msg-anim-easing);
}

/* ─── 11. Yukleniyor ─── */
.ygz-msg-loading {
  padding: 24px;
  text-align: center;
  color: var(--ygz-muted);
  font-size: 12px;
}

/* ─── 12. Arama Sonuc Ayirici ─── */
.ygz-msg-conv-separator {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ygz-muted2);
  background: var(--ygz-bg2);
  border-bottom: 1px solid var(--ygz-border);
}

/* ─── 13. Online/Offline Durum ─── */
.ygz-msg-chat-status {
  font-size: 10px;
  font-weight: 400;
}
.ygz-msg-status--online {
  color: #22c55e;
}
.ygz-msg-status--offline {
  color: var(--ygz-muted2);
}

/* Online/Offline dot (konusma listesinde isim yaninda — standalone) */
.ygz-msg-online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  background: var(--ygz-muted2);
  transition: background 0.2s ease;
}
.ygz-msg-online-dot--on {
  background: #22c55e;
  animation: ygz-msg-online-pulse 2s ease-in-out infinite;
}
.ygz-msg-online-dot--off {
  background: var(--ygz-muted2);
}

@keyframes ygz-msg-online-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

/* ─── 14. Goruldu Tiklari ─── */
.ygz-msg-seen {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 2px;
}
.ygz-msg-tick-icon {
  width: 16px;
  height: 12px;
}
.ygz-msg-tick--sent {
  color: rgba(255, 255, 255, 0.6);
}
.ygz-msg-tick--read {
  color: #60a5fa;
}

/* ─── 15. Dosya Eki Stilleri ─── */
.ygz-msg-attachments {
  margin-bottom: 4px;
}

.ygz-msg-attach-img {
  margin-bottom: 4px;
}
.ygz-msg-attach-img img {
  max-width: 280px;
  max-height: 200px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.ygz-msg-attach-img img:hover {
  opacity: 0.9;
}

.ygz-msg-attach-file {
  margin-bottom: 4px;
}
.ygz-msg-attach-file a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  transition: background var(--ygz-transition-fast), transform var(--ygz-transition-fast);
}
.ygz-msg-attach-file a:hover {
  background: rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.ygz-msg-bubble--sent .ygz-msg-attach-file a {
  background: rgba(255, 255, 255, 0.15);
}
.ygz-msg-bubble--sent .ygz-msg-attach-file a:hover {
  background: rgba(255, 255, 255, 0.25);
}

.ygz-msg-attach-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ygz-msg-attach-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.ygz-msg-attach-size {
  font-size: 10px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ─── 16. Dosya Secim Onizleme Alani ─── */
.ygz-msg-file-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ygz-bg2);
  border-top: 1px solid var(--ygz-border);
  font-size: 12px;
}
.ygz-msg-file-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.ygz-msg-file-size {
  color: var(--ygz-muted);
  flex-shrink: 0;
}
.ygz-msg-file-remove {
  background: none;
  border: none;
  color: var(--ygz-danger);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  margin-left: auto;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ygz-msg-file-remove:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

/* ─── 17. Bos Durum ─── */
.ygz-msg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  flex: 1;
  text-align: center;
}

.ygz-msg-empty-icon {
  width: 64px;
  height: 64px;
  color: var(--ygz-muted3);
  margin-bottom: 16px;
  opacity: 0.6;
}

.ygz-msg-empty-text {
  font-size: 14px;
  color: var(--ygz-muted);
  margin-bottom: 6px;
}

.ygz-msg-empty-hint {
  font-size: 12px;
  color: var(--ygz-muted2);
}

/* ─── 17b. Modal Header: Title Icon, Close Btn, Attach Btn ─── */
.ygz-msg-title-icon {
  vertical-align: middle;
  margin-right: 6px;
  opacity: 0.7;
}

.ygz-msg-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.ygz-msg-close-btn:hover {
  background: var(--ygz-bg3);
  transform: scale(1.1);
}

.ygz-msg-attach-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  color: var(--ygz-muted);
}

.ygz-msg-attach-btn:hover {
  background: var(--ygz-bg3);
  color: var(--ygz-fg);
}

/* ─── 18. Geri Butonu (mobilde gorunur) ─── */
.ygz-msg-back-btn {
  display: none;
  margin-right: 8px;
}

/* ─── 19. Chat Header: Grup Etiketi ─── */
.ygz-msg-chat-grup {
  font-size: 10px;
  font-weight: 400;
  color: var(--ygz-muted);
  background: var(--ygz-bg2);
  padding: 1px 6px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  display: inline-block;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MESAJLASMA RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tablet responsive (640-1024px) */
@media (max-width: 1024px) and (min-width: 641px) {
  .ygz-msg-modal {
    width: clamp(360px, 92vw, 850px);
    height: clamp(420px, 80vh, 660px);
  }
  .ygz-msg-sidebar {
    width: clamp(180px, 28%, 240px);
  }
  .ygz-msg-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .ygz-msg-avatar--md {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

/* Mobile responsive (< 640px) */
@media (max-width: 640px) {
  .ygz-msg-modal {
    width: 98vw;
    height: 90vh;
    border-radius: 14px;
  }
  .ygz-msg-sidebar {
    width: 100%;
    min-width: 100%;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
  }
  .ygz-msg-chat {
    display: none;
  }
  .ygz-msg-body.ygz-msg-chat-open .ygz-msg-sidebar {
    display: none;
  }
  .ygz-msg-body.ygz-msg-chat-open .ygz-msg-chat {
    display: flex;
  }
  .ygz-msg-back-btn {
    display: inline-flex;
  }
  .ygz-msg-avatar--xs {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  .ygz-msg-avatar--sm {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
  .ygz-msg-avatar--md {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
  .ygz-msg-chat-messages {
    padding: 12px 12px;
  }
  .ygz-msg-search-icon {
    width: 14px;
    height: 14px;
  }
  .ygz-msg-empty-icon {
    width: 48px;
    height: 48px;
  }
}

/* ─── Evrak Paylas Butonu ─── */
.ygz-btn-share-evrak {
  color: var(--ygz-accent3);
  justify-content: center;
  transition: all var(--ygz-transition-fast);
  margin-left: auto;
}
.ygz-btn-share-evrak:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
}
.ygz-btn-share-evrak svg {
  width: 18px;
  height: 18px;
}

/* ─── Share (Evrak Paylasim) Modal ─── */
.ygz-share-modal {
  width: clamp(380px, 70vw, 580px);
}

.ygz-share-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ygz-share-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ygz-share-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ygz-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Recipient selector wrapper */
.ygz-share-recipient-wrap {
  position: relative;
}

/* Dropdown — kullanici arama sonuclari */
.ygz-share-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ygz-card);
  border: 1px solid var(--ygz-border);
  border-radius: var(--ygz-radius-lg);
  box-shadow: var(--ygz-shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  margin-top: 4px;
}

.ygz-share-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ygz-fs-base);
  color: var(--ygz-fg);
  transition: background var(--ygz-transition-fast);
}
.ygz-share-dropdown-item:hover {
  background: var(--ygz-primary-ghost);
}
.ygz-share-dropdown-item .ygz-msg-conv-grup {
  flex-shrink: 0;
}

/* Secili kullanici badge */
.ygz-share-selected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ygz-primary-ghost);
  color: var(--ygz-fg);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--ygz-fs-base);
  font-weight: 500;
}
.ygz-share-selected button {
  background: none;
  border: none;
  color: var(--ygz-muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.ygz-share-selected button:hover {
  color: var(--ygz-danger);
}

/* Mesaj textarea */
.ygz-share-textarea {
  min-height: 160px;
  resize: vertical;
}

/* Share modal responsive */
@media (max-width: 640px) {
  .ygz-share-modal {
    width: 95vw;
  }
}
@media (max-width: 480px) {
  .ygz-share-modal {
    width: calc(100vw - 16px);
  }
  .ygz-share-textarea {
    min-height: 120px;
  }
}

/* Cari Arama Popup (GLOBAL) — masaustunde cap, mobilde fluid */
.ygz-cari-lookup-modal {
  width: 90vw;
  max-width: 90vw;
  border-radius: var(--ygz-radius-xl);
}

/* Stok Arama Popup (GLOBAL) — ekranın %90'ını kapla */
.ygz-stok-lookup-modal {
  width: 90vw;
  max-width: 90vw;
  border-radius: var(--ygz-radius-xl);
}

@media (max-width: 768px) {
  .ygz-cari-lookup-modal,
  .ygz-stok-lookup-modal {
    width: 95vw;
    max-width: 95vw;
    border-radius: var(--ygz-radius-lg);
  }
}

/* Generic Lookup Popup — masaustunde orta boyut */
.ygz-generic-lookup-modal {
  width: min(90vw, 700px);
  max-width: min(90vw, 700px);
  border-radius: var(--ygz-radius-xl);
}

@media (max-width: 768px) {
  .ygz-generic-lookup-modal {
    width: 95vw;
    max-width: 95vw;
    border-radius: var(--ygz-radius-lg);
  }
}

/* Lookup modal'lar: flex layout — header/footer sabit, tablo scroll */
.ygz-cari-lookup-modal,
.ygz-stok-lookup-modal,
.ygz-generic-lookup-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 90vh;
}

.ygz-cari-lookup-modal .ygz-modal-body,
.ygz-stok-lookup-modal .ygz-modal-body,
.ygz-generic-lookup-modal .ygz-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 24px;
}

.ygz-cari-lookup-modal .ygz-modal-body > .ygz-grid-wrap,
.ygz-stok-lookup-modal .ygz-modal-body > .ygz-grid-wrap,
.ygz-generic-lookup-modal .ygz-modal-body > .ygz-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Lookup popup header — daha temiz tipografi */
.ygz-cari-lookup-modal .ygz-modal-header,
.ygz-stok-lookup-modal .ygz-modal-header,
.ygz-generic-lookup-modal .ygz-modal-header {
  flex: 0 0 auto;
  padding: 18px 24px;
}

.ygz-cari-lookup-modal .ygz-modal-title,
.ygz-stok-lookup-modal .ygz-modal-title,
.ygz-generic-lookup-modal .ygz-modal-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Lookup close buton — daha elegant */
.ygz-cari-lookup-modal .ygz-modal-header .ygz-btn,
.ygz-stok-lookup-modal .ygz-modal-header .ygz-btn,
.ygz-generic-lookup-modal .ygz-modal-header .ygz-btn {
  border-radius: var(--ygz-radius-sm);
  font-weight: 500;
  padding: 6px 14px;
  border-color: var(--ygz-border);
}

.ygz-cari-lookup-modal .ygz-modal-header .ygz-btn:hover,
.ygz-stok-lookup-modal .ygz-modal-header .ygz-btn:hover,
.ygz-generic-lookup-modal .ygz-modal-header .ygz-btn:hover {
  background: var(--ygz-danger-bg);
  border-color: var(--ygz-danger);
  color: var(--ygz-danger);
}

/* Lookup list satir secimi — keyboard navigasyon (Cari/Stok/Generic popup) */
.ygz-lookup-row--active td {
  background: var(--ygz-table-row-hover) !important;
  box-shadow: inset 0 0 0 2px var(--ygz-brand) !important;
  transition: all var(--ygz-transition-fast);
}

/* Lookup popup icindeki tablo satirlari — daha temiz hover */
.ygz-cari-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-stok-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-generic-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-cihaz-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-makina-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-odemeplan-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-kiraisemri-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-bakim-recete-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-demirbas-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-zimmet-yeri-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-personel-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-makina-sorunu-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-proje-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-promosyon-lookup-modal table.ygz-grid tbody tr:hover td,
.ygz-puanhc-lookup-modal table.ygz-grid tbody tr:hover td {
  background: var(--ygz-primary-ghost) !important;
  cursor: pointer;
}

/* Lookup popup icindeki grid-wrap — subtle iç golge */
.ygz-cari-lookup-modal .ygz-grid-wrap,
.ygz-stok-lookup-modal .ygz-grid-wrap,
.ygz-generic-lookup-modal .ygz-grid-wrap,
.ygz-cihaz-lookup-modal .ygz-grid-wrap,
.ygz-makina-lookup-modal .ygz-grid-wrap,
.ygz-odemeplan-lookup-modal .ygz-grid-wrap,
.ygz-kiraisemri-lookup-modal .ygz-grid-wrap,
.ygz-bakim-recete-lookup-modal .ygz-grid-wrap,
.ygz-demirbas-lookup-modal .ygz-grid-wrap,
.ygz-zimmet-yeri-lookup-modal .ygz-grid-wrap,
.ygz-personel-lookup-modal .ygz-grid-wrap,
.ygz-makina-sorunu-lookup-modal .ygz-grid-wrap,
.ygz-proje-lookup-modal .ygz-grid-wrap,
.ygz-promosyon-lookup-modal .ygz-grid-wrap,
.ygz-puanhc-lookup-modal .ygz-grid-wrap {
  border: 1px solid var(--ygz-border-subtle);
  border-radius: var(--ygz-radius-md);
  overflow-x: auto;
  overflow-y: auto;
}

/* ── Evrak Snapshot (Gecmis Surum) Modu ────────── */

/* 1. Snapshot Banner */
.ygz-snapshot-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

html.dark .ygz-snapshot-banner {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.ygz-snapshot-banner__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ygz-snapshot-banner__close {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--ygz-transition-fast);
  color: inherit;
  display: inline-flex;
  align-items: center;
  padding: 0;
  line-height: 1;
}

.ygz-snapshot-banner__close:hover {
  opacity: 1;
}

/* 2. Evrak Readonly (Snapshot Modu) */
.ygz-evrak-snapshot input,
.ygz-evrak-snapshot select,
.ygz-evrak-snapshot textarea {
  pointer-events: none !important;
  opacity: 0.75;
}

.ygz-evrak-snapshot [data-evrak-action="save"],
.ygz-evrak-snapshot [data-evrak-action="delete"],
.ygz-evrak-snapshot [data-evrak-action="new"] {
  display: none !important;
}

/* 3. Audit Snapshot Link */
.ygz-audit-snapshot-link {
  display: inline;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background var(--ygz-transition-fast), color var(--ygz-transition-fast);
  white-space: nowrap;
  background: rgba(212, 160, 23, 0.12);
  color: #92400e;
}

.ygz-audit-snapshot-link:hover {
  background: rgba(212, 160, 23, 0.25);
  color: #78350f;
  text-decoration: none;
}

html.dark .ygz-audit-snapshot-link {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

html.dark .ygz-audit-snapshot-link:hover {
  background: rgba(251, 191, 36, 0.25);
  color: #fcd34d;
}

/* Lookup tablo: overflow:hidden sticky'yi kırar — kaldır.
   border-radius clipping grid-wrap seviyesinde zaten sağlanıyor. */
.ygz-cari-lookup-modal table.ygz-grid,
.ygz-stok-lookup-modal table.ygz-grid,
.ygz-generic-lookup-modal table.ygz-grid {
  overflow: visible;
  border-radius: 0;
}

/* Kisayol metni — daha subtle */
.ygz-cari-lookup-modal .ygz-modal-body > div:last-child,
.ygz-stok-lookup-modal .ygz-modal-body > div:last-child,
.ygz-generic-lookup-modal .ygz-modal-body > div:last-child {
  opacity: 0.7;
  transition: opacity var(--ygz-transition-fast);
}

.ygz-cari-lookup-modal .ygz-modal-body > div:last-child:hover,
.ygz-stok-lookup-modal .ygz-modal-body > div:last-child:hover,
.ygz-generic-lookup-modal .ygz-modal-body > div:last-child:hover {
  opacity: 1;
}

/* Sayısal değer tonları (bakiye / depo miktarı) */
.ygz-val--pos {
  color: var(--ygz-success);
}
.ygz-val--neg {
  color: var(--ygz-danger);
}
.ygz-val--zero {
  color: var(--ygz-muted2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 15.1: SWEETALERT2 TEMA UYUMU
   ═══════════════════════════════════════════════════════════════════════════════ */

.swal2-popup {
  background: var(--ygz-card) !important;
  color: var(--ygz-fg) !important;
  border: 1px solid var(--ygz-border);
  border-radius: var(--ygz-radius-xl) !important;
}

.swal2-title {
  color: var(--ygz-fg) !important;
}

.swal2-html-container {
  color: var(--ygz-fg-secondary) !important;
}

.swal2-confirm {
  background: var(--ygz-primary) !important;
  color: var(--ygz-primary-contrast) !important;
  border-radius: var(--ygz-radius-md) !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  transition: all 150ms ease !important;
}

.swal2-confirm:hover {
  box-shadow: 0 0 16px rgba(212, 160, 23, 0.20) !important;
}

.swal2-cancel {
  background: var(--ygz-secondary) !important;
  color: var(--ygz-secondary-contrast) !important;
  border-radius: var(--ygz-radius-md) !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
}

.swal2-deny {
  background: var(--ygz-danger) !important;
  color: var(--ygz-danger-contrast) !important;
  border-radius: var(--ygz-radius-md) !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
  background: var(--ygz-input-bg) !important;
  color: var(--ygz-input-fg) !important;
  border-color: var(--ygz-input-border) !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
  border-color: var(--ygz-input-border-focus) !important;
  box-shadow: var(--ygz-input-shadow-focus) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 15.2: TOASTR TEMA UYUMU — Modern SaaS Toast Notifications
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Toast container — sag uste konumlandir, yeterli bosluk birak */
#toast-container {
  padding: 0 !important;
}

#toast-container > div {
  border-radius: var(--ygz-radius-lg) !important;
  box-shadow:
    0 4px 12px rgba(10, 22, 40, 0.08),
    0 8px 24px rgba(10, 22, 40, 0.06),
    0 1px 3px rgba(10, 22, 40, 0.04) !important;
  padding: 14px 18px 14px 50px !important;
  margin: 0 0 8px 0 !important;
  opacity: 1 !important;
  font-size: var(--ygz-fs-base) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  border: 1px solid transparent !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  transition: all var(--ygz-transition-normal) !important;
}

/* Toast hover — hafif yukselme */
#toast-container > div:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 16px rgba(10, 22, 40, 0.10),
    0 12px 32px rgba(10, 22, 40, 0.08),
    0 2px 4px rgba(10, 22, 40, 0.05) !important;
}

/* Toast baslik ve mesaj */
#toast-container .toast-title {
  font-weight: 600 !important;
  font-size: var(--ygz-fs-base) !important;
  margin-bottom: 2px !important;
}

#toast-container .toast-message {
  font-weight: 400 !important;
  font-size: var(--ygz-fs-sm) !important;
  opacity: 0.9 !important;
}

/* Kapat butonu — minimal daire */
#toast-container .toast-close-button {
  color: inherit !important;
  opacity: 0.5 !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  text-shadow: none !important;
  transition: opacity 150ms ease !important;
}

#toast-container .toast-close-button:hover {
  opacity: 1 !important;
}

/* Progress bar — ince ve tema uyumlu */
#toast-container .toast-progress {
  height: 3px !important;
  opacity: 0.25 !important;
  border-radius: 0 0 var(--ygz-radius-lg) var(--ygz-radius-lg) !important;
}

/* === Light tema toast renkleri === */

.toast-success {
  background-color: #ECFDF5 !important;
  color: #065F46 !important;
  border-color: rgba(16, 185, 129, 0.20) !important;
}

.toast-error {
  background-color: #FEF2F2 !important;
  color: #991B1B !important;
  border-color: rgba(239, 68, 68, 0.20) !important;
}

.toast-warning {
  background-color: #FFFBEB !important;
  color: #92400E !important;
  border-color: rgba(245, 158, 11, 0.20) !important;
}

.toast-info {
  background-color: #EFF6FF !important;
  color: #1E40AF !important;
  border-color: rgba(59, 130, 246, 0.20) !important;
}

/* === Dark tema toast renkleri === */

html.dark #toast-container > div {
  box-shadow:
    0 4px 12px rgba(2, 4, 12, 0.25),
    0 8px 24px rgba(2, 4, 12, 0.20),
    0 1px 3px rgba(2, 4, 12, 0.15) !important;
}

html.dark #toast-container > div:hover {
  box-shadow:
    0 6px 16px rgba(2, 4, 12, 0.30),
    0 12px 32px rgba(2, 4, 12, 0.25),
    0 2px 4px rgba(2, 4, 12, 0.18) !important;
}

html.dark .toast-success {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #6EE7B7 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

html.dark .toast-error {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #FCA5A5 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

html.dark .toast-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #FCD34D !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

html.dark .toast-info {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #93C5FD !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOGIN (Auth) — Animated Characters Login v11
   Merkezi tek kolon layout + 4 animasyonlu karakter + glassmorphism kart
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- 1. Login Shell (Tam ekran merkezi layout) --- */
.ygz-login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ygz-bg) 0%, var(--ygz-bg) 40%, rgba(212, 160, 23, 0.08) 100%);
}

html.dark .ygz-login-shell {
  background: linear-gradient(180deg, #0E0F12 0%, #161820 50%, #1a1d2e 100%);
}

/* --- 2. Dekoratif Arka Plan --- */

/* Subtle grid overlay */
.ygz-login-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
}

html.dark .ygz-login-bg-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

/* Amber blur blob base */
.ygz-login-bg-blur {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* Blob 1 (ust-sol ceyrek) */
.ygz-login-bg-blur--1 {
  top: 10%;
  left: 15%;
  background: rgba(245, 158, 11, 0.15);
  animation: ygz-login-glow-pulse 6s ease-in-out infinite;
}

html.dark .ygz-login-bg-blur--1 {
  background: rgba(251, 191, 36, 0.10);
}

/* Blob 2 (alt-sag ceyrek) */
.ygz-login-bg-blur--2 {
  bottom: 10%;
  right: 15%;
  background: rgba(217, 119, 6, 0.12);
  animation: ygz-login-glow-pulse 6s ease-in-out 1s infinite;
}

html.dark .ygz-login-bg-blur--2 {
  background: rgba(245, 158, 11, 0.10);
}

/* --- 3. Tema Toggle (Sag ust kose) --- */
.ygz-login-theme-toggle {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 50;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ygz-border) !important;
  transition: all var(--ygz-transition-normal);
  cursor: pointer;
  color: var(--ygz-fg);
}

html.dark .ygz-login-theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.8);
}

.ygz-login-theme-toggle:hover {
  border-color: var(--ygz-brand) !important;
  background: var(--ygz-primary-ghost) !important;
  transform: rotate(15deg) scale(1.05);
}

/* --- 4. Login Container (Merkezi wrapper — ekrana ortali flex column) --- */
.ygz-login-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  z-index: 10;
  animation: ygz-login-container-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- 5. Logo Bolumu --- */
.ygz-login-logo-glow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.ygz-login-logo-glow img,
.ygz-login-logo-glow .ygz-login-logo {
  height: 110px;
  width: auto;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15));
  position: relative;
  z-index: 1;
}

.ygz-login-logo-glow::after {
  content: "";
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.40) 0%, rgba(212, 160, 23, 0.12) 50%, transparent 70%);
  pointer-events: none;
  animation: ygz-login-glow-pulse 3s ease-in-out infinite;
}

html.dark .ygz-login-logo-glow::after {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, transparent 70%);
}

/* --- 6. Karakter Sahnesi --- */
.ygz-login-character-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 2rem;
  height: 280px;
  position: relative;
}

.ygz-login-character-stage__inner {
  position: relative;
  width: 400px;
  height: 240px;
}

/* --- 7. Karakter Govdeleri --- */
.ygz-char {
  position: absolute;
  bottom: 0;
  transition: all 0.7s ease-in-out;
  transform-origin: bottom center;
}

.ygz-char__body {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Mor karakter */
.ygz-char--purple {
  left: 50px;
  width: 130px;
  height: 240px;
  background: #6C3FF5;
  border-radius: 8px 8px 0 0;
  z-index: 1;
}

/* Mor karakter — typing buyume */
.ygz-char--purple.ygz-char--typing-grow {
  height: 280px;
}

/* Mor karakter — sifre gizlilik buyume */
.ygz-char--purple.ygz-char--password-hide {
  height: 280px;
}

/* Siyah karakter */
.ygz-char--black {
  left: 170px;
  width: 90px;
  height: 200px;
  background: #2D2D2D;
  border-radius: 6px 6px 0 0;
  z-index: 2;
}

/* Turuncu karakter */
.ygz-char--orange {
  left: 0;
  width: 170px;
  height: 140px;
  background: #FF9B6B;
  border-radius: 85px 85px 0 0;
  z-index: 3;
}

/* Sari karakter */
.ygz-char--yellow {
  left: 230px;
  width: 100px;
  height: 160px;
  background: #E8D754;
  border-radius: 50px 50px 0 0;
  z-index: 4;
}

/* --- 8. Karakter Yuz Konteyneri --- */
.ygz-char__face {
  position: absolute;
  display: flex;
  align-items: center;
  transition: all 0.2s ease-out;
}

.ygz-char--purple .ygz-char__face {
  gap: 24px;
  left: 35px;
  top: 30px;
}

.ygz-char--black .ygz-char__face {
  gap: 20px;
  left: 20px;
  top: 25px;
}

.ygz-char--orange .ygz-char__face {
  gap: 24px;
  left: 60px;
  top: 65px;
}

.ygz-char--yellow .ygz-char__face {
  gap: 20px;
  left: 38px;
  top: 30px;
}

/* --- 9. Gozler --- */
.ygz-eye {
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.15s ease;
  overflow: hidden;
}

/* Mor karakter gozleri */
.ygz-char--purple .ygz-eye {
  width: 16px;
  height: 16px;
}

/* Siyah karakter gozleri */
.ygz-char--black .ygz-eye {
  width: 14px;
  height: 14px;
}

/* Goz kirpma durumu — JS .ygz-char--blinking class'ini parent'a ekler */
.ygz-char--blinking .ygz-eye {
  height: 2px !important;
  overflow: hidden;
}

/* --- 10. Goz Bebekleri --- */
.ygz-pupil {
  border-radius: 50%;
  background: #2D2D2D;
  transition: transform 0.1s ease-out;
}

/* Goz ici bebekler (mor, siyah) */
.ygz-char--purple .ygz-eye .ygz-pupil {
  width: 6px;
  height: 6px;
}

.ygz-char--black .ygz-eye .ygz-pupil {
  width: 5px;
  height: 5px;
}

/* Bagimsiz bebekler (turuncu, sari — beyaz daire yok) */
.ygz-char--orange > .ygz-char__body > .ygz-char__face > .ygz-pupil {
  width: 10px;
  height: 10px;
}

.ygz-char--yellow > .ygz-char__body > .ygz-char__face > .ygz-pupil {
  width: 10px;
  height: 10px;
}

/* --- 11. Sari Karakter Agiz --- */
.ygz-char__mouth {
  position: absolute;
  width: 56px;
  height: 3px;
  background: #2D2D2D;
  border-radius: 9999px;
  transition: all 0.2s ease-out;
  left: 30px;
  top: 62px;
}

/* --- 12. Login Karti (Glassmorphism) --- */
.ygz-login-card {
  max-width: 28rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 32px;
}

html.dark .ygz-login-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.50);
}

/* --- 13. Kart Header (Baslik + Alt baslik) --- */
.ygz-login-card-header {
  text-align: center;
  margin-bottom: 24px;
}

/* ASP:Label span olarak render olur — element-agnostik selector */
.ygz-login-card-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
  color: var(--ygz-fg);
}

.ygz-login-card-subtitle {
  display: block;
  font-size: 0.875rem;
  color: var(--ygz-muted2);
  margin: 0;
}

/* --- 14. Login Error (hata mesaji label) --- */
.ygz-login-error {
  display: block;
  margin-bottom: 16px;
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* --- 15. Form alanlari wrapper --- */
.ygz-login-form-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --- 16. Form Inputlari (Login baglami) --- */
.ygz-login-shell .ygz-form-group {
  margin-bottom: 20px;
}

.ygz-login-shell .ygz-input {
  height: 44px;
  background: rgba(255, 255, 255, 0.50);
  border-color: rgba(0, 0, 0, 0.12);
}

html.dark .ygz-login-shell .ygz-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}

.ygz-login-shell .ygz-input:focus {
  border-color: #D4A017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12);
  transform: translateY(-1px);
}

html.dark .ygz-login-shell .ygz-input:focus {
  border-color: #F5C518;
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.10);
}

/* --- 17. Sifre alani wrapper (relative icin toggle buton) --- */
.ygz-login-password-wrapper {
  position: relative;
}

.ygz-login-password-wrapper .ygz-input {
  padding-right: 44px;
}

/* --- 18. Login Butonu --- */
.ygz-login-shell .ygz-btn-primary {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 44px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: #D4A017;
  color: #FFFFFF;
  box-shadow: var(--ygz-shadow-md);
  transition: all 0.3s ease;
  margin-top: 8px;
}

html.dark .ygz-login-shell .ygz-btn-primary {
  background: #F5C518;
  color: #0B0D12;
}

.ygz-login-shell .ygz-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.ygz-login-shell .ygz-btn-primary:hover {
  background: #c49315;
  box-shadow:
    var(--ygz-shadow-lg),
    0 0 24px rgba(212, 160, 23, 0.25),
    0 0 48px rgba(212, 160, 23, 0.10);
}

html.dark .ygz-login-shell .ygz-btn-primary:hover {
  background: #e0b516;
  box-shadow:
    var(--ygz-shadow-lg),
    0 0 24px rgba(245, 197, 24, 0.20),
    0 0 48px rgba(245, 197, 24, 0.08);
}

/* --- 19. Sifre Goster/Gizle Butonu --- */
.ygz-login-eye-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ygz-muted2);
  cursor: pointer;
  padding: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.ygz-login-eye-toggle:hover {
  color: var(--ygz-fg);
}

.ygz-login-eye-icon {
  width: 16px;
  height: 16px;
}

.ygz-login-eye-icon--hide {
  display: none;
}

/* --- 20. Hata Mesaji --- */
.ygz-alert-danger {
  background: var(--ygz-danger-bg);
  color: var(--ygz-danger);
  border-radius: var(--ygz-radius-md);
  border: 1px solid rgba(220, 38, 38, 0.12);
  animation: ygz-login-field-in 0.3s ease-out both;
}

/* --- 21. Login Step 2 — Hosgeldiniz mesaji --- */
.ygz-login-welcome {
  display: block;
  color: var(--ygz-text-secondary);
  padding: 0.75rem 1rem;
  line-height: 1.6;
  border-radius: var(--ygz-radius-md);
  background: var(--ygz-bg-secondary);
  border: 1px solid var(--ygz-border);
  text-align: left;
  font-size: 0.875rem;
}

.ygz-login-welcome strong {
  color: var(--ygz-text-primary);
}

/* --- 22. Login Step 2 — Outline buton (Farkli Hesap) --- */
.ygz-login-shell .ygz-btn-outline {
  background: transparent;
  border: 1px solid var(--ygz-border);
  color: var(--ygz-text-secondary);
  padding: 0.625rem 1rem;
  border-radius: var(--ygz-radius-md);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  font-size: 0.875rem;
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 8px;
}

.ygz-login-shell .ygz-btn-outline:hover {
  border-color: var(--ygz-primary);
  color: var(--ygz-primary);
}

/* --- 23. Footer --- */
.ygz-login-footer {
  text-align: center;
  margin-top: 2rem;
}

.ygz-login-footer-text {
  font-size: 0.75rem;
  color: var(--ygz-muted3);
  margin: 0;
}

.ygz-login-version {
  margin-left: 0.5rem;
  opacity: 0.6;
}

/* --- 24. Animasyonlar --- */

/* Staggered form field girisi */
.ygz-login-shell .ygz-form-group:nth-child(1) { animation: ygz-login-field-in 0.4s ease-out 0.1s both; }
.ygz-login-shell .ygz-form-group:nth-child(2) { animation: ygz-login-field-in 0.4s ease-out 0.2s both; }
.ygz-login-shell .ygz-form-group:nth-child(3) { animation: ygz-login-field-in 0.4s ease-out 0.3s both; }
.ygz-login-shell .ygz-form-group:nth-child(4) { animation: ygz-login-field-in 0.4s ease-out 0.4s both; }

/* Login buton animasyonu */
.ygz-login-shell .ygz-btn-primary {
  animation: ygz-login-field-in 0.4s ease-out 0.5s both;
}

@keyframes ygz-login-field-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo glow nabiz animasyonu */
@keyframes ygz-login-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Container giris animasyonu */
@keyframes ygz-login-container-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- 25. Responsive --- */

/* Tablet */
@media (max-width: 1024px) {
  .ygz-login-card {
    box-shadow: var(--ygz-shadow-md);
    padding: 28px;
  }
}

/* Kucuk ekranlar */
@media (max-width: 640px) {
  .ygz-login-character-stage {
    transform: scale(0.7);
    transform-origin: bottom center;
    margin-bottom: 0.5rem;
    height: 200px;
  }

  .ygz-login-card {
    padding: 24px;
    border-radius: 12px;
  }

  .ygz-login-shell .ygz-form-group {
    margin-bottom: 16px;
  }

  .ygz-login-logo-glow img,
  .ygz-login-logo-glow .ygz-login-logo {
    height: 80px;
  }

  .ygz-login-logo-glow {
    margin-bottom: 1rem;
  }

  .ygz-login-theme-toggle {
    top: 16px;
    right: 16px;
  }
}

/* Cok kucuk ekranlar */
@media (max-width: 480px) {
  .ygz-login-character-stage {
    transform: scale(0.55);
    height: 160px;
    margin-bottom: 0;
  }

  .ygz-login-logo-glow img,
  .ygz-login-logo-glow .ygz-login-logo {
    height: 64px;
  }

  .ygz-login-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ygz-login-card {
    padding: 20px;
  }

  .ygz-login-card-title {
    font-size: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 16: DASHBOARD CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Stat Card — sol border aksan + ust gradient stripe */
.ygz-stat-card {
  background: var(--ygz-card);
  border: 1px solid var(--ygz-border);
  border-left: 3px solid var(--ygz-primary);
  border-radius: var(--ygz-radius-lg);
  padding: 20px 24px;
  transition: all var(--ygz-transition-normal);
  position: relative;
  overflow: hidden;
}

/* Ust gradient stripe (hover'da gorunur) */
.ygz-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ygz-primary), color-mix(in srgb, var(--ygz-primary) 40%, transparent));
  opacity: 0;
  transition: opacity var(--ygz-transition-normal);
}

.ygz-stat-card:hover {
  box-shadow: var(--ygz-shadow-md);
  border-color: var(--ygz-border-strong);
  transform: translateY(-2px);
}

.ygz-stat-card:hover::before {
  opacity: 1;
}

.ygz-stat-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ygz-muted2);
  margin-bottom: 10px;
}

.ygz-stat-card__value {
  font-size: 32px;
  font-weight: 800;
  font-family: var(--ygz-font-mono);
  color: var(--ygz-fg);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ygz-stat-card__meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--ygz-border);
  display: grid;
  gap: 6px;
}

.ygz-stat-card__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ygz-muted2);
}

.ygz-stat-card__meta-k { color: var(--ygz-muted2); }
.ygz-stat-card__meta-v { color: var(--ygz-fg); font-family: var(--ygz-font-mono); font-weight: 600; }

/* Trend badge (pill stili) */
.ygz-stat-card__trend {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
}

.ygz-stat-card__trend--up {
  color: var(--ygz-success);
  background: color-mix(in srgb, var(--ygz-success) 10%, transparent);
}

.ygz-stat-card__trend--down {
  color: var(--ygz-danger);
  background: color-mix(in srgb, var(--ygz-danger) 10%, transparent);
}

/* Quick filter pill butonlari (Gunluk/Haftalik/Aylik) */
.ygz-quick-filters .ygz-btn-sm {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--ygz-fs-sm);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 16b: DASHBOARD — BÖLÜM AKSANLARI ve BAŞLIKLARI
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Bölüm başlığı — tablo gruplarını ayıran küçük section label.
   Div veya H2 tag'i ile kullanılabilir; H2 default margin/line-height reset edilir. */
.ygz-dash-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  margin-right: 0;
  margin-bottom: 12px;
  margin-left: 0;
  padding: 0;
  font-size: var(--ygz-fs-sm);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ygz-muted2);
}
.ygz-dash-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ygz-border);
}

/* Kart aksan renkleri — sol border ile bölüm renklendirmesi */
.ygz-card--accent-blue   { border-left: 3px solid #3b82f6; }
.ygz-card--accent-green  { border-left: 3px solid #22c55e; }
.ygz-card--accent-purple { border-left: 3px solid #8b5cf6; }
.ygz-card--accent-amber  { border-left: 3px solid #f59e0b; }
.ygz-card--accent-teal   { border-left: 3px solid #14b8a6; }
.ygz-card--accent-red    { border-left: 3px solid #ef4444; }

/* Aksan renkli kartlarda header sol padding (border ile hizalama) */
.ygz-card--accent-blue   > .ygz-card-header,
.ygz-card--accent-green  > .ygz-card-header,
.ygz-card--accent-purple > .ygz-card-header,
.ygz-card--accent-amber  > .ygz-card-header,
.ygz-card--accent-teal   > .ygz-card-header,
.ygz-card--accent-red    > .ygz-card-header {
  padding-left: 21px;
}

/* Aksan renkli kartlarda üst border radius sol tarafta kaldır (3px border-left ile çakışmasın) */
.ygz-card--accent-blue,
.ygz-card--accent-green,
.ygz-card--accent-purple,
.ygz-card--accent-amber,
.ygz-card--accent-teal,
.ygz-card--accent-red {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 17: RESPONSIVE (2026 — Mobile-First, Touch-Friendly, Fluid)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Tablet (max 1024px) --- */
@media (max-width: 1024px) {
  .ygz-stat-card {
    padding: 16px;
  }
  .ygz-stat-card__value {
    font-size: clamp(20px, 3vw, 26px);
  }
  .ygz-modal-body {
    padding: 16px;
  }
  .ygz-grid-menu__card {
    padding: 12px;
  }

  /* Tablet: sidebar collapsed varsayilan */
  .ygz-sidebar {
    width: 64px;
  }

  /* Tablet: lookup popup'lar — ekranın %92'si */
  .ygz-cari-lookup-modal,
  .ygz-stok-lookup-modal {
    width: 92vw;
    max-width: 92vw;
  }

  /* Tablet: toast bildirimler biraz daraltilsin */
  #toast-container {
    max-width: 360px !important;
  }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
  .ygz-sidebar {
    display: none;
  }

  /* Touch-friendly: minimum 44px touch target (Apple HIG / WCAG 2.5.5) */
  .ygz-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .ygz-btn-sm {
    min-height: 36px;
  }

  .ygz-input,
  .ygz-select,
  .ygz-textarea,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  select {
    min-height: 44px !important;
    font-size: 16px !important; /* iOS zoom engellemek icin 16px */
  }

  table.ygz-grid th,
  table.ygz-grid td {
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.3;
  }

  /* Grid tablo: horizontal scroll iyilestirmesi */
  .ygz-grid-wrap {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .ygz-stat-card {
    padding: 12px;
  }
  /* Stat card değeri: fluid sizing (sabit 32px yerine clamp) */
  .ygz-stat-card__value {
    font-size: clamp(22px, 4vw, 32px);
  }
  .ygz-stat-card__label {
    font-size: 10px;
  }
  .ygz-stat-card__meta-row {
    font-size: 11px;
  }

  .ygz-page-3pane__header {
    padding: 8px !important;
  }
  .ygz-page-3pane__footer {
    padding-top: 0;
    margin-top: 0;
  }

  .ygz-modal-header {
    padding: 12px 16px;
  }
  .ygz-modal-body {
    padding: 12px 16px;
  }
  .ygz-modal-footer {
    padding: 12px 16px;
    /* Mobilde butonlar yan yana sigmazsa alt alta */
    flex-wrap: wrap;
  }

  .ygz-grid-menu {
    width: min(340px, 92vw);
  }

  /* Kart padding'leri mobilde kompakt */
  .ygz-card-body {
    padding: 10px;
  }
  .ygz-card-header {
    padding: 8px 12px;
    font-size: 13px;
  }
  .ygz-card-footer {
    padding: 8px 12px;
  }

  /* KPI kart degeri mobilde kuculsun */
  .ygz-kpi-card__value {
    font-size: 18px;
  }

  /* Dashboard filtre alani tek sutun */
  .ygz-page-container .grid.grid-cols-1 {
    gap: 8px;
  }

  /* Lookup popup'lar mobilde — header/body kompakt */
  .ygz-cari-lookup-modal .ygz-modal-header,
  .ygz-stok-lookup-modal .ygz-modal-header,
  .ygz-generic-lookup-modal .ygz-modal-header {
    padding: 12px 14px;
  }
  .ygz-cari-lookup-modal .ygz-modal-body,
  .ygz-stok-lookup-modal .ygz-modal-body,
  .ygz-generic-lookup-modal .ygz-modal-body {
    padding: 10px 14px;
  }

  /* Toast bildirimler mobilde tam genislik */
  #toast-container {
    left: 8px !important;
    right: 8px !important;
    max-width: none !important;
  }
  #toast-container > div {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--ygz-radius-md) !important;
  }

  /* SweetAlert2 mobilde kompakt */
  .swal2-popup {
    width: 90vw !important;
    max-width: 90vw !important;
    padding: 16px !important;
    border-radius: var(--ygz-radius-lg) !important;
  }
  .swal2-confirm,
  .swal2-cancel,
  .swal2-deny {
    min-height: 44px !important;
    padding: 10px 20px !important;
  }

  /* Filter header/footer: padding küçült (tablet/mobil) */
  .ygz-filter-header {
    padding: 6px 8px;
  }
  .ygz-filter-footer {
    padding: 4px 8px;
  }

  /* Login card: padding küçült */
  .ygz-login-card {
    padding: 24px;
  }

  /* Login logo glow: boyut küçült */
  .ygz-login-logo-glow {
    width: 80px;
    height: 80px;
  }
  .ygz-login-logo-glow img,
  .ygz-login-logo-glow svg {
    width: 80px;
    height: 80px;
  }

  /* Sidebar collapsed tooltip: dokunmatik ekranlarda gizle */
  .ygz-sidebar--collapsed [data-tooltip]::after {
    display: none !important;
  }

  /* Toast: kompakt padding ve küçük font */
  #toast-container > div {
    padding: 10px 14px 10px 42px !important;
    font-size: 12px !important;
  }
  #toast-container .toast-message {
    font-size: 11.5px !important;
  }

  /* KPI kart: padding küçült */
  .ygz-kpi-card {
    padding: 14px;
  }

  /* Evrak toolbar: wrap davranışı (taşma engeli) */
  .ygz-evrak-toolbar {
    flex-wrap: wrap;
  }

  /* Hover efektlerini mobilde kaldir (dokunmatik cihazlar) */
  .ygz-btn:hover {
    transform: none;
  }
  .ygz-btn:active {
    transform: scale(0.97);
  }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
  table.ygz-grid th,
  table.ygz-grid td {
    padding: 5px 6px;
    font-size: 11px;
  }

  .ygz-stat-card__value {
    font-size: 18px;
  }

  .ygz-grid-menu {
    width: 95vw;
    left: 2.5vw !important;
    right: 2.5vw !important;
  }

  /* Modal: küçük mobilde kompakt radius ve kenar boşluğu */
  .ygz-modal {
    max-width: calc(100vw - 16px);
    border-radius: 10px;
    margin: 8px;
  }

  .ygz-modal-title {
    font-size: 14px;
  }

  /* Kart padding'leri kucuk mobilde minimal */
  .ygz-card-body {
    padding: 6px;
  }
  .ygz-card-header {
    padding: 6px 8px;
    font-size: 12px;
  }
  .ygz-card-footer {
    padding: 6px 8px;
  }

  /* Sayfa container padding kuculsun */
  .ygz-page-container {
    padding: 8px;
  }

  /* KPI kart fontu daha kucuk */
  .ygz-kpi-card__value {
    font-size: 16px;
  }
  .ygz-kpi-card__desc {
    font-size: 11px;
  }

  /* Lookup popup tablo satirlari daha kompakt */
  .ygz-cari-lookup-modal table.ygz-grid th,
  .ygz-cari-lookup-modal table.ygz-grid td,
  .ygz-stok-lookup-modal table.ygz-grid th,
  .ygz-stok-lookup-modal table.ygz-grid td,
  .ygz-generic-lookup-modal table.ygz-grid th,
  .ygz-generic-lookup-modal table.ygz-grid td {
    padding: 4px 6px;
    font-size: 10px;
  }

  /* Toast bildirimler kucuk mobilde daha kompakt */
  #toast-container > div {
    padding: 10px 14px 10px 44px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  /* Filter header: küçük mobilde daha kompakt */
  .ygz-filter-header {
    padding: 4px 6px;
  }

  /* Login card: küçük mobilde minimal padding */
  .ygz-login-card {
    padding: 20px;
  }

  /* Touch-friendly: tüm buton ve inputlar minimum 44px yükseklik */
  .ygz-btn,
  .ygz-btn-sm,
  .ygz-icon-btn {
    min-height: 44px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 44px !important;
  }
}

/* --- Landscape phone (yatay telefon) --- */
@media (max-height: 500px) and (orientation: landscape) {
  .ygz-modal {
    max-height: 95vh;
  }
  .ygz-msg-modal {
    height: 92vh;
  }
  .ygz-cari-lookup-modal,
  .ygz-stok-lookup-modal {
    max-height: 90vh;
  }
}

/* --- Reduced motion (erisebilirlik) --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Touch cihazlar: hover efektlerini zayiflat --- */
@media (hover: none) and (pointer: coarse) {
  .ygz-btn:hover {
    transform: none;
    box-shadow: var(--ygz-btn-shadow);
  }
  .ygz-card-elevated:hover {
    transform: none;
  }
  .ygz-stat-card:hover {
    transform: none;
  }
  /* Touch cihazlarda :active ile geri bildirim ver */
  .ygz-btn:active {
    transform: scale(0.96);
    opacity: 0.85;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 18: ANİMASYONLAR
   ═══════════════════════════════════════════════════════════════════════════════ */

@keyframes ygz-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ygz-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ygz-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ygz-animate-fade-in {
  animation: ygz-fade-in 0.3s ease-out;
}

.ygz-animate-slide-up {
  animation: ygz-slide-up 0.3s ease-out;
}

.ygz-animate-slide-in-right {
  animation: ygz-slide-in-right 0.3s ease-out;
}

/* Staggered animations for lists */
.ygz-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ygz-stagger > *:nth-child(2) { animation-delay: 50ms; }
.ygz-stagger > *:nth-child(3) { animation-delay: 100ms; }
.ygz-stagger > *:nth-child(4) { animation-delay: 150ms; }
.ygz-stagger > *:nth-child(5) { animation-delay: 200ms; }
.ygz-stagger > *:nth-child(6) { animation-delay: 250ms; }

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 19: LOADING STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

.ygz-skeleton {
  background: linear-gradient(
    90deg,
    var(--ygz-border) 25%,
    var(--ygz-bg3) 50%,
    var(--ygz-border) 75%
  );
  background-size: 200% 100%;
  animation: ygz-skeleton-shimmer 1.5s infinite;
  border-radius: var(--ygz-radius-sm);
}

@keyframes ygz-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ygz-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ygz-border);
  border-top-color: var(--ygz-primary);
  border-radius: 50%;
  animation: ygz-spin 0.8s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   BÖLÜM 20: PRİNT STİLLERİ
   ═══════════════════════════════════════════════════════════════════════════════ */

@media print {
  /* Temel sayfa ayarlari */
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
  }

  /* Tum animasyonlari, transition'lari ve shadow'lari kaldir */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Etkilesimli bilesenleri gizle — basimda gorunmemeli */
  .ygz-sidebar,
  .ygz-mobile-sidebar-panel,
  .ygz-mobile-header,
  #mobileSidebar,
  #ygzSidebarShowBtn,
  .ygz-btn,
  .ygz-modal-backdrop,
  .ygz-loading-overlay,
  #toast-container,
  #toast-container > div,
  .toast,
  .ygz-grid-menu,
  .ygz-sidebar-toggle-btn,
  .ygz-login-theme-toggle,
  .swal2-container,
  .ygz-skeleton,
  .ygz-spinner {
    display: none !important;
  }

  /* Kartlar — temiz border, saf beyaz arka plan */
  .ygz-card {
    border: 1px solid #ccc !important;
    background: white !important;
    backdrop-filter: none !important;
    break-inside: avoid;
  }
  .ygz-card-header {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #ccc !important;
    color: black !important;
  }

  /* Tablolar — print uyumlu */
  table.ygz-grid {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
  }
  table.ygz-grid th {
    background: #f0f0f0 !important;
    color: black !important;
    font-weight: 600 !important;
    border: 1px solid #bbb !important;
    padding: 4px 6px !important;
    font-size: 9pt !important;
  }
  table.ygz-grid td {
    border: 1px solid #ccc !important;
    background: white !important;
    color: black !important;
    padding: 3px 6px !important;
    font-size: 9pt !important;
  }
  /* Tablo satir hover/zebra renklerini kaldir */
  table.ygz-grid tbody tr:hover,
  table.ygz-grid tbody tr:nth-child(even) {
    background: white !important;
  }

  /* Grid layout'lari print'te tek sutun */
  .ygz-dashboard-stack,
  .ygz-dashboard-grid,
  .ygz-dashboard-2col,
  .ygz-dashboard-3col,
  .ygz-kpi-grid {
    display: block !important;
  }
  .ygz-dashboard-stack > *,
  .ygz-dashboard-grid > *,
  .ygz-dashboard-2col > *,
  .ygz-dashboard-3col > *,
  .ygz-kpi-grid > * {
    break-inside: avoid;
    margin-bottom: 10px !important;
  }

  /* Scroll container'lar print'te acilsin */
  .ygz-grid-wrap {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Stat kartlar print uyumlu */
  .ygz-stat-card {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    background: white !important;
  }
  .ygz-stat-card__value {
    color: black !important;
    font-size: 14pt !important;
  }

  /* KPI kartlar print uyumlu */
  .ygz-kpi-card {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    background: white !important;
  }
  .ygz-kpi-card__value {
    color: black !important;
  }

  /* Page container: print'te padding minimal */
  .ygz-page-container {
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Filter header/footer: backdrop-filter kaldir, solid arkaplan */
  .ygz-filter-header,
  .ygz-filter-footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: white !important;
    border-color: #ccc !important;
    position: static !important;
  }

  /* Login logo glow: glow efektini gizle */
  .ygz-login-logo-glow::after,
  .ygz-login-logo-glow-sm::after {
    display: none !important;
  }

  /* Glass efektlerini kaldir — print'te solid arkaplan */
  .ygz-glass,
  .ygz-login-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: white !important;
    border-color: #ccc !important;
  }

  /* Linkleri print'te URL ile goster */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #666;
  }
  /* Dahili linkler icin URL gosterme */
  a[href^="#"]::after,
  a[href^="javascript"]::after,
  .ygz-sidebar-item::after,
  nav a::after {
    content: none;
  }

  /* Badge renkleri print uyumlu */
  .ygz-badge {
    border: 1px solid #999 !important;
    background: #f5f5f5 !important;
    color: black !important;
  }

  /* Sayfa kesme kontrolu */
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
  }
  .ygz-card,
  .ygz-stat-card,
  .ygz-kpi-card,
  table.ygz-grid {
    break-inside: avoid;
  }
}

/* =============================================================
   Sidebar Mascot — karakter boyutlari (ygz-sidebar-mascot.js)
   Inline style yerine CSS class (L-049)
   Purple karakter brand color kullanir (L-058)
   ============================================================= */

/* Konusma balonu cursor (tiklanabilir) */
.ygz-mascot-bubble {
  cursor: pointer;
}

/* ---- Purple karakter (brand color) ---- */
.ygz-mascot-char--purple {
  width: 36px;
  height: 48px;
  background: var(--ygz-brand, #D4A017);
  border-radius: 6px 6px 0 0;
}
.ygz-mascot-char--purple .ygz-mascot-face {
  gap: 12px;
  top: 10px;
  left: 8px;
}
.ygz-mascot-char--purple .ygz-mascot-eye {
  width: 9px;
  height: 9px;
}
.ygz-mascot-char--purple .ygz-mascot-pupil {
  width: 4px;
  height: 4px;
}

/* ---- Black karakter ---- */
.ygz-mascot-char--black {
  width: 28px;
  height: 42px;
  background: #2D2D2D;
  border-radius: 5px 5px 0 0;
}
.ygz-mascot-char--black .ygz-mascot-face {
  gap: 10px;
  top: 10px;
  left: 5px;
}
.ygz-mascot-char--black .ygz-mascot-eye {
  width: 8px;
  height: 8px;
}
.ygz-mascot-char--black .ygz-mascot-pupil {
  width: 3px;
  height: 3px;
}

/* ---- Orange karakter (pupil-only) ---- */
.ygz-mascot-char--orange {
  width: 44px;
  height: 36px;
  background: #FF9B6B;
  border-radius: 22px 22px 0 0;
}
.ygz-mascot-char--orange .ygz-mascot-face {
  gap: 14px;
  top: 12px;
  left: 11px;
}
.ygz-mascot-char--orange .ygz-mascot-pupil--standalone {
  width: 6px;
  height: 6px;
}

/* ---- Yellow karakter (pupil-only + agiz) ---- */
.ygz-mascot-char--yellow {
  width: 32px;
  height: 40px;
  background: #E8D754;
  border-radius: 16px 16px 0 0;
}
.ygz-mascot-char--yellow .ygz-mascot-face {
  gap: 12px;
  top: 10px;
  left: 6px;
}
.ygz-mascot-char--yellow .ygz-mascot-pupil--standalone {
  width: 6px;
  height: 6px;
}

/* === EvrakTipleri Hub Dashboard === */
/* Spec: docs/superpowers/specs/2026-05-02-evrak-tipleri-hub-redesign-design.md */

.ygz-evrak-tipleri-header {
  margin-bottom: 12px;
}
.ygz-evrak-tipleri-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--ygz-text);
}

.ygz-evrak-tipleri-search {
  margin-bottom: 16px;
}
.ygz-evrak-tipleri-search .ygz-input {
  width: 100%;
  max-width: 480px;
  font-size: 14px;
}

.ygz-evrak-tipleri-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .ygz-evrak-tipleri-hub {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .ygz-evrak-tipleri-hub {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ygz-evrak-tipleri-card {
  border: 1px solid var(--ygz-border, #e0e3e8);
  border-radius: 10px;
  background: var(--ygz-surface, #fff);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}
.ygz-evrak-tipleri-card:hover {
  border-color: var(--ygz-brand, #fbbf24);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.ygz-evrak-tipleri-card--expanded {
  border-color: var(--ygz-brand, #fbbf24);
  background: linear-gradient(135deg, #fffbe6 0%, #fef3c7 100%);
}
[data-ygz-theme="dark"] .ygz-evrak-tipleri-card--expanded {
  background: linear-gradient(135deg, #2a2a1a 0%, #3a3a20 100%);
}

.ygz-evrak-tipleri-card__header {
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  user-select: none;
}
.ygz-evrak-tipleri-card__icon {
  font-size: 24px;
  line-height: 1;
}
.ygz-evrak-tipleri-card__title h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--ygz-text);
}
.ygz-evrak-tipleri-card__count {
  font-size: 11px;
  color: var(--ygz-text-muted, #718096);
  margin: 2px 0 0 0;
}
.ygz-evrak-tipleri-card__hint {
  font-size: 11px;
  color: var(--ygz-text-muted, #a0aec0);
  margin: 1px 0 0 0;
  line-height: 1.3;
}
.ygz-evrak-tipleri-card__chevron {
  text-align: right;
  font-size: 14px;
  color: var(--ygz-text-muted, #718096);
  transition: transform 200ms ease;
}
.ygz-evrak-tipleri-card--expanded .ygz-evrak-tipleri-card__chevron {
  transform: rotate(180deg);
}

.ygz-evrak-tipleri-card__list {
  display: none;
  padding: 0 8px 10px 8px;
  border-top: 1px solid var(--ygz-border-soft, #f0f1f3);
}
.ygz-evrak-tipleri-card--expanded .ygz-evrak-tipleri-card__list {
  display: block;
}

.ygz-evrak-tipleri-list-item {
  display: grid;
  grid-template-columns: 22px 1fr 60px 50px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ygz-text);
  transition: background 120ms ease;
}
.ygz-evrak-tipleri-list-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-ygz-theme="dark"] .ygz-evrak-tipleri-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ygz-evrak-tipleri-list-item__icon {
  font-size: 14px;
  text-align: center;
}
.ygz-evrak-tipleri-list-item__name {
  font-weight: 500;
}
.ygz-evrak-tipleri-list-item__et {
  font-size: 10px;
  color: var(--ygz-text-muted, #a0aec0);
}
.ygz-evrak-tipleri-list-item__cta {
  font-size: 11px;
  color: var(--ygz-brand, #b45309);
  text-align: right;
}
/* Modül desteği olmayan satırlar (IsAvailable=false): gri, tıklanamaz, "Yakında" rozeti */
.ygz-evrak-tipleri-list-item--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.025);
  border-left: 3px solid var(--ygz-border-muted, #cbd5e0);
}
[data-ygz-theme="dark"] .ygz-evrak-tipleri-list-item--disabled {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: rgba(255, 255, 255, 0.12);
}
.ygz-evrak-tipleri-list-item--disabled .ygz-evrak-tipleri-list-item__cta {
  color: var(--ygz-text-muted, #a0aec0);
  font-style: italic;
}
/* e-Belge kapsamı rozeti (Satış Faturası / Çıkış İrsaliyesi yanında küçük italic alt-satır) */
.ygz-evrak-tipleri-list-item__aciklama {
  display: block;
  font-size: 10px;
  color: var(--ygz-text-muted, #718096);
  font-style: italic;
  margin-top: 2px;
  font-weight: 400;
}
.ygz-evrak-tipleri-list-item__aciklama:empty {
  display: none;
}

.ygz-evrak-tipleri-empty {
  margin-top: 24px;
  padding: 16px;
  text-align: center;
  color: var(--ygz-text-muted, #718096);
  border: 1px dashed var(--ygz-border, #e0e3e8);
  border-radius: 8px;
}

/* ──────────────────────────────────────────────────────────────────── */
/* Cari evrak footer — KDV/Matrah/İskonto/AraToplam gizle              */
/* Spec: docs/superpowers/plans/2026-05-03-cari-evrak-cinsi-schema.md   */
/* Plan Task 4 — yalnız Genel Toplam + Yeni Tutar görünür kalsın        */
/* ──────────────────────────────────────────────────────────────────── */
.ygz-evrak-footer.ygz-evrak-footer--cari-mode .ygz-totals-row--ara,
.ygz-evrak-footer.ygz-evrak-footer--cari-mode .ygz-totals-row--iskonto,
.ygz-evrak-footer.ygz-evrak-footer--cari-mode .ygz-totals-row--matrah,
.ygz-evrak-footer.ygz-evrak-footer--cari-mode .ygz-totals-row--kdv {
  display: none !important;
}

/* Cari mode — Bağlı Evraklar + Satış Geçmişi panellerini gizle
   (yalnızca fatura/sipariş/teklif evraklarına özel) */
.ygz-evrak-footer.ygz-evrak-footer--cari-mode .ygz-evrak-panel[aria-label="Bağlı evraklar"],
.ygz-evrak-footer.ygz-evrak-footer--cari-mode .ygz-evrak-panel[aria-label="Satış geçmişi"] {
  display: none !important;
}

/* ============================================================================
   Dashboard / Teslimat — Multi-kart by Teslim Türü
   /dashboard/teslimat sayfasında her aktif TESLIM_TURLERI kaydı için bir kart;
   Mikro stok hareketleri (sth_evraktip=4, sth_tip=1) +
   STOK_TESLIMAT_HAREKETLERI eşleşmesinden Föy v3 pattern teslim/kalan/durum.
   ========================================================================== */

.ygz-tur-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--ygz-bg2);
  border-bottom: 1px solid var(--ygz-border);
  flex-wrap: wrap;
}

.ygz-tur-toolbar .ygz-btn-primary {
  margin-left: auto;
}

.ygz-tur-card-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
}

.ygz-tur-card {
  background: var(--ygz-card);
  border: 1px solid var(--ygz-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.ygz-tur-card-header {
  padding: 12px 16px;
  background: var(--ygz-bg3);
  border-bottom: 1px solid var(--ygz-border);
}

.ygz-tur-card-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ygz-fg);
}

.ygz-tur-card-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ygz-tur-card-stat-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--ygz-border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ygz-fg);
}

.ygz-tur-card-stat-label {
  color: var(--ygz-muted);
}

.ygz-tur-card-stat-count {
  font-weight: 600;
}

.ygz-tur-card-stat-badge--total {
  background: var(--ygz-info-bg);
  border-color: var(--ygz-info);
}

.ygz-tur-card-stat-badge--full {
  background: var(--ygz-success-bg);
  border-color: var(--ygz-success);
}

.ygz-tur-card-stat-badge--partial {
  background: var(--ygz-warning-bg);
  border-color: var(--ygz-warning);
}

.ygz-tur-card-stat-badge--none {
  background: var(--ygz-danger-bg);
  border-color: var(--ygz-danger);
}

.ygz-tur-card-body {
  flex: 1 1 auto;
  overflow-x: auto;
}

.ygz-tur-card-empty {
  padding: 24px;
  text-align: center;
  color: var(--ygz-muted2);
  font-size: 13px;
  font-style: italic;
}

/* Tablo: ygz-grid ile uyumlu — kart içinde min-width yok ki overflow-x scroll yapabilsin */
.ygz-tur-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ygz-tur-card-table thead th.ygz-grid-header {
  background: var(--ygz-bg3);
  color: var(--ygz-fg);
  font-weight: 600;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--ygz-border);
  white-space: nowrap;
}

.ygz-tur-card-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--ygz-border-subtle);
  white-space: nowrap;
}

.ygz-tur-card-table tbody tr:hover td {
  background: var(--ygz-brand-muted);
}

/* Mobile: kartlar tek sütun olur (auto-fit minmax zaten handle ediyor; ek padding düşürme) */
@media (max-width: 640px) {
  .ygz-tur-card-container {
    padding: 8px;
    gap: 10px;
  }
  .ygz-tur-card-header {
    padding: 10px 12px;
  }
  .ygz-tur-card-table {
    font-size: 12px;
  }
}

.ygz-info-message {
  padding: 24px;
  text-align: center;
  color: var(--ygz-muted2);
  font-size: 14px;
  background: var(--ygz-bg2);
  border: 1px dashed var(--ygz-border);
  border-radius: 8px;
  margin: 16px;
}

/* WIP (Yapım Aşamasında) badge ve banner */
.ygz-wip-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: #b45309;
  border-radius: 6px;
  vertical-align: middle;
  line-height: 1.4;
  text-transform: uppercase;
}
.ygz-sidebar-item.ygz-sidebar-item--wip {
  opacity: 0.85;
}
.ygz-wip-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 12px;
  padding: 10px 14px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid #b45309;
  border-left-width: 4px;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
  font-weight: 500;
}
[data-ygz-theme="dark"] .ygz-wip-banner {
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
}
.ygz-wip-banner::before {
  content: "🔧";
  font-size: 16px;
}

/* WIP sayfa marker: ygz-wip-banner.js banner enjekte eder ve form alanlarını
 * disabled hale getirir. Aşağıdaki kurallar görsel ipucu için (auto-disable
 * JS DOM disabled attribute set eder; CSS sadece state ipucu).
 */
.ygz-wip-page input[disabled]:not([type="hidden"]),
.ygz-wip-page select[disabled],
.ygz-wip-page textarea[disabled],
.ygz-wip-page button[disabled]:not(.ygz-wip-allow):not([data-ygz-wip-allow]) {
  cursor: not-allowed;
}
.ygz-wip-page [data-ygz-wip-disabled="1"] {
  background-color: rgba(180, 83, 9, 0.05);
}
[data-ygz-theme="dark"] .ygz-wip-page [data-ygz-wip-disabled="1"] {
  background-color: rgba(251, 191, 36, 0.05);
}

/* ─── Dışa Aktarma Yetki — Visual Designer ─────────────────────── */

.ygz-disa-tasarim-item {
  border: 1px solid var(--ygz-border, rgba(0,0,0,0.08));
}
.ygz-disa-tasarim-item:hover {
  background: rgba(212, 160, 23, 0.08);
}
.ygz-disa-tasarim-active {
  background: rgba(212, 160, 23, 0.15);
  border-color: var(--ygz-brand, #D4A017);
}

.ygz-disa-tabbar-row {
  background: var(--ygz-bg-soft, rgba(0,0,0,0.02));
}

.ygz-disa-katalog {
  max-height: 120px;
  overflow-y: auto;
  padding: 4px;
  background: var(--ygz-bg-soft, rgba(0,0,0,0.02));
  border-radius: 8px;
}
.ygz-disa-katalog-chip {
  border: 1px solid var(--ygz-border, rgba(0,0,0,0.1));
  background: var(--ygz-bg, #fff);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ygz-disa-katalog-chip:hover {
  background: rgba(212, 160, 23, 0.1);
  border-color: var(--ygz-brand, #D4A017);
}
.ygz-disa-katalog-chip-active {
  background: rgba(212, 160, 23, 0.15);
  border-color: var(--ygz-brand, #D4A017);
  font-weight: 500;
}
/* Manuel öğe ekleme butonu — katalog chip listesi başında, brand color ile vurgu. */
.ygz-disa-katalog-chip-manuel {
  background: var(--ygz-brand, #D4A017);
  color: #fff;
  border-color: var(--ygz-brand, #D4A017);
}
.ygz-disa-katalog-chip-manuel:hover {
  background: #b88a13;
  border-color: #b88a13;
  color: #fff;
}
/* Önizlemede manuel öğe değerleri — italik + soft brand renk ile ipucu. */
.ygz-disa-preview-manuel {
  font-style: italic;
  color: var(--ygz-brand-dark, #b88a13);
}
/* Manuel öğe modal'ında "kullanılabilir alanlar" listesi — clickable chip'ler.
   Tıklanınca textarea'ya ${ns.field} insert eder; tasarımcı field ezberlemez. */
.ygz-disa-manuel-fieldlist {
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--ygz-border, #e5e7eb);
  padding-top: 0.5rem;
}
.ygz-disa-fieldgroup {
  margin-bottom: 0.5rem;
}
.ygz-disa-fieldgroup > summary {
  list-style: disclosure-closed;
  padding: 2px 4px;
  border-radius: 4px;
  user-select: none;
}
.ygz-disa-fieldgroup[open] > summary {
  list-style: disclosure-open;
}
.ygz-disa-fieldgroup > summary:hover {
  background: var(--ygz-bg2, #f3f4f6);
}
.ygz-disa-fieldchip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 8px 8px;
}
.ygz-disa-fieldchip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--ygz-border, #d1d5db);
  border-radius: 999px;
  background: var(--ygz-bg, #fff);
  color: var(--ygz-text, #111);
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ygz-disa-fieldchip:hover {
  background: var(--ygz-brand, #D4A017);
  border-color: var(--ygz-brand, #D4A017);
  color: #fff;
}
.ygz-disa-fieldchip:active {
  transform: translateY(1px);
}
/* Manuel öğe satırlarında key column yerine gösterilen tip badge — auto-key (manuel_xxxx)
   yerine "✎ Kompozit" / "✎ QR" gibi okunabilir etiket. */
.ygz-disa-manuel-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ygz-brand, #D4A017);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
/* Manuel görsel/QR/barkod inline preview — img boyut tavanları. */
.ygz-disa-preview-img {
  display: inline-block;
  vertical-align: middle;
  max-height: 60px;
  max-width: 120px;
  object-fit: contain;
}
.ygz-disa-preview-qr {
  width: 60px;
  height: 60px;
}
.ygz-disa-preview-barcode {
  max-height: 40px;
  max-width: 180px;
  width: auto;
}

.ygz-disa-secili {
  max-height: 360px;
  overflow-y: auto;
}
.ygz-disa-sutun-row {
  background: var(--ygz-bg-soft, rgba(0,0,0,0.02));
  border: 1px solid var(--ygz-border, rgba(0,0,0,0.06));
}
.ygz-disa-sutun-row > input[type="text"] {
  min-width: 100px;
}

.ygz-disa-preview-card {
  background: var(--ygz-bg, #fff);
}
.ygz-disa-preview-wrap {
  max-height: 480px;
  overflow: auto;
}
/* Önizleme kâğıt yönü görsel ipucu — dikey tasarımda preview alanını A4 portrait
   oranına yaklaşacak şekilde daralt + ortala; yatayda geniş bırak. Gerçek render
   renderer'larda (QuestPdf/ClosedXml) <Sayfa orientation> ile yapılır. */
.ygz-disa-preview-wrap--portrait #previewArea {
  max-width: 520px;
  margin: 0 auto;
}
.ygz-disa-preview-wrap--landscape #previewArea {
  max-width: none;
}
/* Gerçek-veri kontrol şeridi (Seri/Sıra inputları + buton) */
.ygz-disa-preview-live-seri {
  width: 84px;
  padding: 4px 8px;
  font-size: 0.8rem;
}
.ygz-disa-preview-live-sira {
  width: 96px;
  padding: 4px 8px;
  font-size: 0.8rem;
}
.ygz-disa-preview-status-error {
  color: var(--ygz-danger, #dc2626);
}
.ygz-disa-preview-table th {
  background: rgba(212, 160, 23, 0.18);
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--ygz-border, rgba(0,0,0,0.08));
}
.ygz-disa-preview-table td {
  padding: 4px 10px;
  border: 1px solid var(--ygz-border, rgba(0,0,0,0.06));
}

.ygz-disa-xml-textarea {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12px;
  white-space: pre;
  background: var(--ygz-bg-soft, rgba(0,0,0,0.02));
}

/* Designer 3 bölge önizleme — üst alanlar (header dict) */
.ygz-disa-preview-title {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ygz-disa-preview-headerblock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ygz-border, rgba(0,0,0,0.08));
  margin-bottom: 6px;
}
.ygz-disa-preview-headerpair {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  font-size: 12px;
  align-items: baseline;
}
.ygz-disa-preview-headerlbl {
  color: var(--ygz-muted2, #6b7280);
  font-weight: 500;
}
.ygz-disa-preview-headerval {
  font-weight: 500;
}

/* Designer 3 bölge önizleme — toplamlar (alt sağ blok) */
.ygz-disa-preview-totalsblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
  width: fit-content;
  min-width: 280px;
  padding: 8px 12px;
  border: 1px solid var(--ygz-border, rgba(0,0,0,0.08));
  border-radius: 6px;
  background: rgba(212, 160, 23, 0.05);
}
.ygz-disa-preview-totalrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  font-size: 12px;
  padding: 2px 0;
}
.ygz-disa-preview-totalrow.font-semibold {
  border-top: 1px solid var(--ygz-border, rgba(0,0,0,0.16));
  padding-top: 4px;
  margin-top: 2px;
  font-weight: 700;
}
.ygz-disa-preview-totallbl {
  color: var(--ygz-muted2, #6b7280);
}
.ygz-disa-preview-totalval {
  font-variant-numeric: tabular-nums;
}

/* Ek Alanlar bloğu — toplamlardan sonra full-width paragraf akışı
   (açıklayıcı bilgiler, garanti şartları, notlar, imza satırları). */
.ygz-disa-preview-ekblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--ygz-border, rgba(0,0,0,0.08));
}
.ygz-disa-preview-ekrow {
  font-size: 12px;
  line-height: 1.4;
}
.ygz-disa-preview-eklbl {
  font-weight: 600;
  color: var(--ygz-muted2, #6b7280);
  margin-right: 4px;
}
.ygz-disa-preview-ekval {
  color: var(--ygz-fg, inherit);
}

/* 4 bölge kart başlık hint (kaç seçili) */
.ygz-disa-section-hint {
  font-style: italic;
}

/* ─── i18n Dil Butonu (ygz-i18n.js) ─────────────────────────── */
/* Dil toggle rozeti: buton köşesinde aktif dil kodu (TR/EN/UZ) */
[data-ygz-lang-toggle] {
  position: relative;
}

.ygz-lang-badge {
  position: absolute;
  right: 1px;
  bottom: 1px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  opacity: 0.9;
}

/* Login (Auth.Master) sağ-üst sabit dil butonu */
.ygz-login-lang-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
}