/*
 * WORKAIBOX — APP.CSS
 *
 * İÇİNDEKİLER
 * 01 TASARIM TEMELİ   tokens · base
 * 02 YERLEŞİM        layout · header · sidebar · navigation
 * 03 BİLEŞENLER      buttons · forms · feedback-cards · tables · content
 *                    overlays/dropdowns · controls · picker · data-list
 * 04 SAYFA DÜZENLERİ common · records · record-details · ai · calendar · chat
 *                    landing · component catalog · payment-receipt · pos · trade-document · settings
 * 05 ÇIKTI/YARDIMCI  print-profiles · icons · utilities · responsive-overrides
 *
 * Bir bölüme gitmek için "WUI SECTION: pages/landing" gibi bir kimlik arayın.
 * Renk ve ölçü: tokens. Ortak kontrol: components/*. Sayfa düzeni: pages/*.
 * Tek fiziksel CSS dosyasıdır. Bölüm kimlikleri dosya yolu değildir.
 * Sayfa seçimi HTML üzerinde data-style="landing" gibi kısa anahtarlarla yapılır.
 * Sıralamayı ve WUI SECTION / WUI END SECTION işaretlerini koruyun.
 */

/* ==========================================================================
   BÖLÜM 01 — Tasarım değişkenleri: renk, yazı, ölçü ve tema
   ========================================================================== */
/* GRUP 01 — TASARIM TEMELİ */
/* WUI SECTION: tokens */
/* WORKAIBOX WUI — DESIGN TOKEN MODULE
First section of app.css. Raw palette values live here;
layout, components and page modules consume semantic role tokens. */
/* =========================================================
DOSYA KURALLARI
========================================================= */
/* Ham renk yalnız 01 bölümünde tanımlanır. Ortak bileşenin tek sahibi vardır.
Sayfa bölümleri yalnız kompozisyon ve sayfaya özgü ölçüleri tanımlar. */
/* =========================================================
SABİT RENK PALETİ VE DESIGN TOKENLARI
========================================================= */
/* WORKAIBOX WUI 0.9.1 — canonical design tokens. */
:root {
  color-scheme: light;
  /* Raw palette */
  --wui-black: #000000;
  --wui-white: #FFFFFF;
  --wui-button-neutral-text: var(--wui-black);
  --wui-gray-50: #F6F9FA;
  --wui-gray-100: #EAF1F3;
  --wui-gray-200: #D2E1E5;
  --wui-gray-300: #B3C2C8;
  --wui-gray-375: #9CAAB2;
  --wui-gray-400: #93A1A9;
  --wui-gray-500: #78838D;
  --wui-gray-600: #5F6973;
  --wui-gray-700: #46515C;
  --wui-gray-800: #2F3943;
  --wui-gray-900: #252D35;
  --wui-gray-925: #1D2329;
  --wui-gray-950: #111418;
  --wui-brand-navy: #315B84;
  --wui-brand-mid: #042E5C;
  --wui-brand-ink: #011435;
  --wui-brand-cyan: #02B6C9;
  --wui-brand-cyan-strong: #029EAF;
  --wui-brand-cyan-soft: var(--wui-gray-50);
  --wui-palette-success: #76B900;
  --wui-palette-success-strong: #4E7B00;
  --wui-palette-danger: #E53935;
  --wui-palette-danger-strong: #C62828;
  --wui-palette-warning: #FFC107;
  --wui-palette-warning-strong: #D89B00;
  /* Ajanda event tipleri: yeni renk üretmez, mevcut tema paletine bağlanır. */
  --wui-event-task: var(--wui-brand-cyan);
  --wui-event-meeting: var(--wui-brand-navy);
  --wui-event-call: var(--wui-brand-cyan-strong);
  --wui-event-reminder: var(--wui-palette-warning);
  --wui-event-document-renewal: var(--wui-palette-warning-strong);
  --wui-event-leave: var(--wui-palette-success);
  --wui-event-collection-reminder: var(--wui-palette-success-strong);
  --wui-event-payment-reminder: var(--wui-palette-danger);
  --wui-event-other: var(--wui-gray-500);
  /* Approved opacity variants: base RGB values always resolve to the locked palette. */
  --wui-alpha-white-06: rgb(255 255 255 / 6%);
  --wui-alpha-white-10: rgb(255 255 255 / 10%);
  --wui-alpha-white-11: rgb(255 255 255 / 11%);
  --wui-alpha-white-25: rgb(255 255 255 / 25%);
  --wui-alpha-white-35: rgb(255 255 255 / 35%);
  --wui-alpha-white-40: rgb(255 255 255 / 40%);
  --wui-alpha-black-30: rgb(0 0 0 / 30%);
  --wui-alpha-black-50: rgb(0 0 0 / 50%);
  --wui-alpha-primary-12: rgb(2 182 201 / 12%);
  --wui-alpha-primary-24: rgb(2 182 201 / 24%);
  --wui-alpha-primary-88: rgb(2 182 201 / 88%);
  --wui-alpha-success-88: rgb(118 185 0 / 88%);
  --wui-alpha-warning-88: rgb(255 193 7 / 88%);
  /* Semantic surfaces */
  --wui-bg: var(--wui-gray-50);
  --wui-surface: var(--wui-white);
  --wui-surface-2: var(--wui-gray-50);
  --wui-surface-alt: var(--wui-gray-50);
  --wui-surface-subtle: var(--wui-gray-50);
  --wui-surface-hover: var(--wui-gray-100);
  --wui-text: var(--wui-brand-ink);
  --wui-text-muted: var(--wui-gray-600);
  --wui-muted: var(--wui-gray-600);
  --wui-border-soft: var(--wui-gray-200);
  --wui-border-default: var(--wui-gray-300);
  --wui-border-strong: var(--wui-gray-700);
  --wui-control-border: var(--wui-gray-500);
  --wui-control-border-hover: var(--wui-border-strong);
  --wui-control-border-focus: var(--wui-accent-strong);
  --wui-control-border-disabled: var(--wui-gray-300);
  --wui-control-border-valid: var(--wui-palette-success-strong);
  --wui-control-border-invalid: var(--wui-palette-danger-strong);
  --wui-popup-border: var(--wui-gray-500);
  --wui-popup-shadow: var(--wui-raised-shadow);
  --wui-preview-scale: 1;
  --wui-popover-bg: var(--wui-bg-elevated);
  --wui-popover-hover-bg: var(--wui-bg-hover);
  --wui-popover-border: var(--wui-popup-border);
  --wui-line-color: var(--wui-border-soft);
  /* Fixed WORKAIBOX logo-brand interaction system.
  Cyan is the primary/focus colour; green is reserved for semantic success. */
  --wui-brand-primary: var(--wui-brand-cyan);
  --wui-brand-primary-hover: var(--wui-brand-cyan-strong);
  --wui-brand-primary-active: var(--wui-brand-navy);
  --wui-accent: var(--wui-brand-primary);
  --wui-accent-hover: var(--wui-brand-primary-hover);
  --wui-accent-active: var(--wui-brand-primary-active);
  --wui-accent-soft: color-mix(in srgb, var(--wui-brand-primary) 14%, transparent);
  --wui-accent-contrast: var(--wui-brand-ink);
  --wui-accent-hover-contrast: var(--wui-brand-ink);
  --wui-accent-active-contrast: var(--wui-white);
  --wui-accent-light-strong: var(--wui-brand-mid);
  --wui-accent-dark-strong: var(--wui-brand-cyan);
  --wui-accent-strong: var(--wui-accent-light-strong);
  /* Button colour contracts use only the predefined palette values.
  No runtime mixing or generated shade is allowed for button states. */
  --wui-primary: var(--wui-brand-cyan);
  --wui-primary-hover: var(--wui-brand-cyan-strong);
  --wui-primary-active: var(--wui-brand-navy);
  --wui-primary-strong: var(--wui-brand-cyan-strong);
  --wui-primary-soft: var(--wui-accent-soft);
  --wui-secondary: var(--wui-brand-navy);
  --wui-secondary-hover: var(--wui-brand-mid);
  --wui-secondary-active: var(--wui-brand-ink);
  --wui-secondary-strong: var(--wui-brand-mid);
  --wui-secondary-soft: var(--wui-brand-cyan-soft);
  --wui-focus: var(--wui-brand-cyan);
  --wui-on-primary: var(--wui-brand-ink);
  --wui-on-primary-hover: var(--wui-brand-ink);
  --wui-on-primary-active: var(--wui-white);
  --wui-on-secondary: var(--wui-white);
  --wui-on-secondary-hover: var(--wui-white);
  --wui-on-secondary-active: var(--wui-white);
  /* Semantic status colours */
  --wui-success: var(--wui-palette-success);
  --wui-success-hover: var(--wui-palette-success-strong);
  --wui-success-active: var(--wui-palette-success-strong);
  --wui-success-strong: var(--wui-palette-success-strong);
  --wui-on-success: var(--wui-brand-ink);
  --wui-on-success-strong: var(--wui-white);
  --wui-warning: var(--wui-palette-warning);
  --wui-warning-hover: var(--wui-palette-warning-strong);
  --wui-warning-active: var(--wui-palette-warning-strong);
  --wui-warning-strong: var(--wui-palette-warning-strong);
  --wui-on-warning: var(--wui-brand-ink);
  --wui-on-warning-strong: var(--wui-brand-ink);
  --wui-danger: var(--wui-palette-danger);
  --wui-danger-hover: var(--wui-palette-danger-strong);
  --wui-danger-active: var(--wui-palette-danger-strong);
  --wui-danger-strong: var(--wui-palette-danger-strong);
  --wui-danger-soft: var(--wui-gray-100);
  --wui-on-danger: var(--wui-black);
  --wui-on-danger-strong: var(--wui-white);
  --wui-info: var(--wui-brand-navy);
  --wui-on-info: var(--wui-brand-ink);
  --wui-control-off: var(--wui-gray-400);
  --wui-dropzone-border: var(--wui-gray-400);
  --wui-sidebar: var(--wui-white);
  --wui-sidebar-text: var(--wui-gray-600);
  --wui-sidebar-hover: var(--wui-gray-50);
  --wui-sidebar-active: var(--wui-gray-100);
  --wui-code-bg: var(--wui-black);
  --wui-code-text: var(--wui-gray-50);
  --wui-code-success: var(--wui-palette-success);
  --wui-code-warning: var(--wui-palette-warning);
  --wui-code-danger: var(--wui-palette-danger);
  --wui-code-info: var(--wui-brand-cyan);
  --wui-icon-white: var(--wui-white);
  /* Typography */
  --wui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wui-font-xs: 11px;
  --wui-font-sm: 13px;
  --wui-font-md: 14px;
  --wui-font-lg: 16px;
  --wui-font-xl: 18px;
  --wui-font-2xl: 24px;
  --wui-font-display: 28px;
  --wui-font-2xs: 10px;
  /* Commercial A4 / thermal print typography. */
  --wui-font-print-xxs: 8px;
  --wui-font-print-xs: 8px;
  --wui-font-print-sm: 8px;
  --wui-font-print-md: 8.6px;
  --wui-font-print-lg: 9px;
  --wui-font-print-xl: 10px;
  --wui-font-print-title: 18px;
  --wui-font-xs-plus: 12px;
  --wui-font-xl-plus: 20px;
  --wui-font-title-sm: 22px;
  --wui-font-display-sm: 32px;
  --wui-font-display-md: 40px;
  --wui-font-display-lg: 58px;
  --wui-font-display-xl: 72px;
  --wui-font-display-2xl: 96px;
  --wui-weight-regular: 400;
  --wui-weight-medium: 500;
  --wui-weight-semibold: 600;
  --wui-weight-bold: 700;
  --wui-weight-heavy: 800;
  --wui-line-normal: 1.5;
  --wui-line-none: 1;
  --wui-line-tight: 1.1;
  --wui-line-heading: 1.2;
  --wui-line-snug: 1.25;
  --wui-line-compact: 1.35;
  --wui-line-relaxed: 1.6;
  --wui-line-loose: 1.7;
  /* Spacing */
  --wui-space-1: 4px;
  --wui-space-2: 8px;
  --wui-space-3: 12px;
  --wui-space-4: 16px;
  --wui-space-5: 20px;
  --wui-space-6: 24px;
  --wui-space-7: 28px;
  --wui-space-8: 32px;
  --wui-space-9: 36px;
  --wui-space-10: 40px;
  --wui-space-11: 44px;
  --wui-space-12: 48px;
  --wui-space-13: 52px;
  --wui-space-14: 56px;
  --wui-space-15: 60px;
  --wui-space-16: 64px;
  --wui-space-17: 68px;
  --wui-space-18: 72px;
  --wui-space-19: 76px;
  --wui-space-20: 80px;
  --wui-space-21: 84px;
  --wui-space-22: 88px;
  --wui-space-23: 92px;
  --wui-space-24: 96px;
  --wui-space-25: 100px;
  --wui-space-26: 104px;
  --wui-space-27: 108px;
  --wui-space-28: 112px;
  --wui-space-29: 116px;
  --wui-space-30: 120px;
  --wui-space-31: 124px;
  --wui-space-32: 128px;
  /* Component contracts */
  --wui-border-width: 1px;
  --wui-line: var(--wui-border-width) solid var(--wui-line-color);
  --wui-shell-tile-size: var(--wui-header-height-desktop);
  --wui-component-gap: var(--wui-space-3);
  --wui-component-padding-x: var(--wui-space-4);
  --wui-card-padding: var(--wui-space-4);
  --wui-menu-width: 220px;
  --wui-drawer-width: 280px;
  --wui-popover-margin: 8px;
  --wui-search-max: 420px;
  --wui-search-compact-max: 320px;
  --wui-filter-min: 160px;
  --wui-filter-basis: 180px;
  /* Controls and icons */
  --wui-hit-target-min: 40px;
  --wui-hit-target-mobile: 44px;
  --wui-control-sm: var(--wui-hit-target-min);
  --wui-control-md: 44px;
  --wui-control-lg: 48px;
  --wui-control-xs: 36px;
  --wui-control-xl: 52px;
  --wui-control-2xl: 56px;
  --wui-control-3xl: 60px;
  --wui-icon-xs: 16px;
  --wui-icon-sm: 18px;
  --wui-icon-md: 22px;
  --wui-icon-lg: 24px;
  --wui-icon-xl: 32px;
  --wui-icon-nav: 28px;
  --wui-table-action-size: 40px;
  --wui-table-action-icon: 24px;
  --wui-time-center-dot: 7px;
  /* Geometry: structural UI is sharp; functional circular geometry opts in. */
  --wui-radius-ui: 0;
  --wui-radius-round: 50%;
  /* Elevation and motion */
  --wui-shadow-color: var(--wui-black);
  --wui-elevation-color: var(--wui-brand-ink);
  --wui-shadow-sm: 0 1px 2px var(--wui-elevation-color);
  --wui-shadow-lg: 0 10px 28px var(--wui-shadow-color);
  --wui-shadow-landing-hero: 0 30px 90px var(--wui-alpha-black-30);
  --wui-shadow-control-focus: 0 0 0 1px var(--wui-control-border-focus);
  --wui-shadow-focus-inset: inset 0 0 0 2px var(--wui-state-focus-color);
  --wui-shadow-focus-inset-strong: inset 0 0 0 3px var(--wui-state-focus-color);
  --wui-shadow-scroll-edge: inset -18px 0 16px -20px var(--wui-text-tertiary);
  --wui-shadow-hover-outline: 0 0 0 4px var(--wui-state-hover-surface);
  --wui-shadow-range-fill: 0 0 0 100vmax var(--wui-primary-soft) inset;
  --wui-shadow-autofill: 0 0 0 1000px var(--wui-input-bg) inset;
  --wui-shadow-select-menu: 0 8px 24px var(--wui-elevation-color);
  --wui-shadow-paper: 0 1px 2px var(--wui-black);
  --wui-shadow-calendar-band: inset 0 -8px 0 var(--wui-gray-100);
  --wui-shadow-sticky-left: -1px 0 0 var(--wui-line-color);
  --wui-shadow-sticky-right: 1px 0 0 var(--wui-line-color);
  --wui-shadow-control-hover-inset: inset 0 0 0 var(--wui-border-width) var(--wui-control-border-hover);
  --wui-focus-ring: var(--wui-state-focus-ring, 0 0 0 2px var(--wui-focus));
  --wui-hover-ring: 0 0 0 2px var(--wui-gray-100);
  --wui-motion-fast: 140ms;
  --wui-motion-normal: 180ms;
  --wui-motion-slow: 240ms;
  --wui-motion-spin: 700ms;
  --wui-motion-shimmer: 1350ms;
  --wui-motion-autofill: 9999s;
  --wui-motion-reduced: .01ms;
  --wui-ease-standard: ease;
  --wui-ease-enter: ease-out;
  --wui-transition-fast: var(--wui-motion-fast) var(--wui-ease-standard);
  /* Layering and shell */
  --wui-z-local: 1;
  --wui-z-local-above: 2;
  --wui-z-local-overlay: 3;
  --wui-z-raised: 4;
  --wui-z-raised-above: 5;
  --wui-z-sidebar: 50;
  --wui-z-header: 60;
  --wui-z-dropdown: 180;
  --wui-z-notification: 190;
  --wui-z-overlay: 200;
  --wui-z-offcanvas: 205;
  --wui-z-toast: 240;
  --wui-z-fullscreen: 2147483000;
  --wui-header-height-desktop: 72px;
  --wui-header-height-mobile: 60px;
  --wui-topbar-h: var(--wui-shell-tile-size);
  --wui-sidebar-w: var(--wui-shell-tile-size);
  --wui-page-max: 1600px;
  /* Print contract: screen theme does not leak into paper output. */
  --wui-print-bg: var(--wui-white);
  --wui-print-text: var(--wui-gray-950);
  --wui-print-muted: var(--wui-gray-600);
  --wui-print-line: var(--wui-gray-200);
  --wui-print-line-strong: var(--wui-gray-300);
  --wui-print-accent: var(--wui-brand-cyan);
  --wui-print-accent-text: var(--wui-brand-mid);
  --wui-print-subtle-bg: var(--wui-gray-50);
  --wui-output-width: 210mm;
}

@media (max-width: 820px) {
  :root {
    --wui-shell-tile-size: var(--wui-header-height-mobile);
    --wui-font-xs: 12px;
    --wui-topbar-h: var(--wui-shell-tile-size);
    --wui-sidebar-w: var(--wui-shell-tile-size);
  }
}

/* Responsive contract (enforced by tools/css-audit.js):
compact 420px · mobile 540px · tablet 820px · wide-layout 1180px. */
/* Dashboard shell geometry and line system:
desktop header cells, sidebar and navigation tiles use 72px;
mobile shell tiles use 60px; all neutral structural borders resolve
through --wui-line-color at the shared 1px border width. */
/* Semantic theme architecture. Raw palette stays stable; components consume role tokens below. */
html[data-theme="light"] {
  color-scheme: light;
  --wui-accent-strong: var(--wui-accent-light-strong);
  --wui-accent-text: var(--wui-accent-light-strong);
  --wui-selected-text: var(--wui-text-primary);
  --wui-selected-secondary-text: var(--wui-text-secondary);
  --wui-focus: var(--wui-accent-strong);
  /* Layered surfaces: light page, white working surfaces, restrained neutral states. */
  --wui-bg-page: var(--wui-gray-50);
  --wui-bg-header: var(--wui-white);
  --wui-bg-sidebar: var(--wui-white);
  --wui-bg-card: var(--wui-white);
  --wui-bg-elevated: var(--wui-white);
  --wui-bg-input: var(--wui-white);
  --wui-bg-hover: var(--wui-gray-100);
  --wui-bg-active: var(--wui-gray-200);
  --wui-bg-disabled: var(--wui-gray-100);
  --wui-bg-overlay: var(--wui-alpha-black-30);
  --wui-button-surface: var(--wui-gray-100);
  --wui-button-surface-hover: var(--wui-gray-200);
  --wui-button-surface-active: var(--wui-gray-300);
  --wui-on-button-surface: var(--wui-brand-ink);
  /* Compatibility surface names now resolve from the canonical bg-* contract. */
  --wui-page-bg: var(--wui-bg-page);
  --wui-header-bg: var(--wui-bg-header);
  --wui-sidebar-bg: var(--wui-bg-sidebar);
  --wui-card-bg: var(--wui-bg-card);
  --wui-raised-bg: var(--wui-bg-elevated);
  --wui-input-bg: var(--wui-bg-input);
  --wui-subtle-bg: var(--wui-bg-hover);
  --wui-overlay-bg: var(--wui-bg-overlay);
  /* Border roles separate structural dividers from interactive controls. */
  --wui-border-soft: var(--wui-gray-200);
  --wui-control-border: var(--wui-gray-500);
  --wui-control-border-hover: var(--wui-gray-700);
  --wui-control-border-disabled: var(--wui-gray-300);
  --wui-control-border-valid: var(--wui-palette-success-strong);
  --wui-control-border-invalid: var(--wui-palette-danger-strong);
  --wui-popup-border: var(--wui-gray-500);
  --wui-popup-shadow: var(--wui-raised-shadow);
  --wui-line-color: var(--wui-border-soft);
  /* Shared interaction states: selection is shown by surface tone and text only; focus remains separate. */
  --wui-state-hover-surface: var(--wui-bg-hover);
  --wui-state-active-surface: var(--wui-bg-active);
  --wui-state-selected-surface: var(--wui-action-primary-soft);
  --wui-state-selected-border: transparent;
  --wui-state-selected-text: var(--wui-accent-text);
  --wui-state-open-surface: var(--wui-action-primary-soft);
  --wui-state-open-border: var(--wui-accent-strong);
  --wui-state-open-text: var(--wui-accent-text);
  --wui-state-disabled-surface: var(--wui-bg-disabled);
  --wui-state-disabled-border: var(--wui-control-border-disabled);
  --wui-state-disabled-text: var(--wui-gray-600);
  --wui-state-focus-color: var(--wui-control-border-focus);
  --wui-state-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wui-state-focus-color) 72%, transparent);
  --wui-state-valid-color: var(--wui-control-border-valid);
  --wui-state-valid-ring: 0 0 0 2px color-mix(in srgb, var(--wui-state-valid-color) 72%, transparent);
  --wui-state-invalid-color: var(--wui-control-border-invalid);
  --wui-state-invalid-surface: var(--wui-danger-soft);
  --wui-state-invalid-ring: 0 0 0 2px color-mix(in srgb, var(--wui-state-invalid-color) 72%, transparent);
  --wui-state-success-color: var(--wui-palette-success-strong);
  --wui-state-warning-color: var(--wui-palette-warning-strong);
  --wui-toast-success-border: var(--wui-palette-success-strong);
  --wui-toast-warning-border: var(--wui-palette-warning-strong);
  --wui-toast-danger-border: var(--wui-palette-danger-strong);
  --wui-toast-info-border: var(--wui-brand-navy);
  /* Semantic feedback surfaces are derived from the locked palette, not new colours. */
  --wui-success-soft: color-mix(in srgb, var(--wui-palette-success) 12%, var(--wui-bg-card));
  --wui-warning-soft: color-mix(in srgb, var(--wui-palette-warning) 14%, var(--wui-bg-card));
  --wui-danger-soft: color-mix(in srgb, var(--wui-palette-danger) 12%, var(--wui-bg-card));
  --wui-info-soft: color-mix(in srgb, var(--wui-brand-navy) 10%, var(--wui-bg-card));
  --wui-status-success-text: var(--wui-palette-success-strong);
  --wui-status-success-secondary-text: var(--wui-brand-ink);
  --wui-status-warning-text: var(--wui-brand-ink);
  --wui-status-warning-secondary-text: var(--wui-brand-ink);
  --wui-status-danger-text: var(--wui-palette-danger-strong);
  --wui-status-danger-secondary-text: var(--wui-brand-ink);
  --wui-status-info-text: var(--wui-brand-mid);
  --wui-status-info-secondary-text: var(--wui-brand-ink);
  /* Compatibility aliases consumed by existing components. */
  --wui-hover-bg: var(--wui-state-hover-surface);
  --wui-selected-bg: var(--wui-state-selected-surface);
  --wui-disabled-bg: var(--wui-state-disabled-surface);
  /* Content */
  --wui-text-primary: var(--wui-brand-ink);
  --wui-text-secondary: var(--wui-gray-800);
  --wui-text-tertiary: var(--wui-gray-600);
  --wui-text-disabled: var(--wui-state-disabled-text);
  --wui-text-inverse: var(--wui-white);
  --wui-ring-color: var(--wui-accent-soft);
  /* Interactive */
  --wui-action-primary: var(--wui-accent);
  --wui-action-primary-hover: var(--wui-accent-hover);
  --wui-action-primary-soft: var(--wui-accent-soft);
  --wui-action-secondary: var(--wui-brand-ink);
  --wui-action-secondary-hover: var(--wui-brand-mid);
  --wui-link-text: var(--wui-brand-mid);
  --wui-text-link: var(--wui-link-text);
  /* Component roles */
  --wui-card-shadow: 0 1px 2px rgb(1 20 53 / 8%);
  --wui-raised-shadow: 0 12px 32px rgb(1 20 53 / 16%);
  --wui-floating-shadow: 0 12px 32px rgb(1 20 53 / 24%);
  --wui-floating-shadow-hover: 0 16px 38px rgb(1 20 53 / 30%);
  --wui-overlay-shadow: 0 22px 60px rgb(1 20 53 / 28%);
  --wui-popup-shadow: var(--wui-raised-shadow);
  --wui-table-head-bg: var(--wui-gray-100);
  --wui-table-row-hover-bg: var(--wui-gray-50);
  --wui-table-row-selected-bg: var(--wui-action-primary-soft);
  --wui-input-hover-bg: var(--wui-input-bg);
  --wui-input-focus-bg: var(--wui-input-bg);
  /* Legacy aliases: old components inherit the semantic model. */
  --wui-bg: var(--wui-page-bg);
  --wui-surface: var(--wui-bg-card);
  --wui-surface-2: var(--wui-subtle-bg);
  --wui-surface-alt: var(--wui-subtle-bg);
  --wui-surface-subtle: var(--wui-subtle-bg);
  --wui-surface-hover: var(--wui-state-hover-surface);
  --wui-text: var(--wui-text-primary);
  --wui-text-muted: var(--wui-text-tertiary);
  --wui-muted: var(--wui-text-tertiary);
  --wui-sidebar: var(--wui-sidebar-bg);
  --wui-sidebar-text: var(--wui-text-tertiary);
  --wui-sidebar-hover: var(--wui-state-hover-surface);
  --wui-sidebar-active: var(--wui-state-selected-surface);
  --wui-primary: var(--wui-brand-cyan);
  --wui-primary-hover: var(--wui-brand-cyan-strong);
  --wui-primary-soft: var(--wui-action-primary-soft);
  --wui-primary-strong: var(--wui-accent-strong);
  --wui-on-primary: var(--wui-accent-contrast);
  --wui-on-primary-hover: var(--wui-accent-hover-contrast);
  --wui-on-primary-active: var(--wui-accent-active-contrast);
  --wui-secondary: var(--wui-brand-navy);
  --wui-secondary-hover: var(--wui-brand-mid);
  --wui-focus-ring: var(--wui-state-focus-ring, 0 0 0 2px var(--wui-focus));
  --wui-shadow-sm: var(--wui-card-shadow);
  --wui-shadow-lg: var(--wui-raised-shadow);
}

html[data-theme="dark"] {
  --wui-button-neutral-text: var(--wui-white);
  color-scheme: dark;
  --wui-accent-strong: var(--wui-accent-dark-strong);
  /* Cyan remains the border/focus signal; selected-surface text stays readable. */
  --wui-accent-text: var(--wui-white);
  --wui-selected-text: var(--wui-text-primary);
  --wui-selected-secondary-text: var(--wui-gray-300);
  --wui-focus: var(--wui-accent-strong);
  /* Neutral dark hierarchy: black page, layered dark-gray working surfaces. */
  --wui-bg-page: var(--wui-black);
  --wui-bg-header: var(--wui-gray-950);
  --wui-bg-sidebar: var(--wui-gray-925);
  --wui-bg-card: var(--wui-gray-900);
  --wui-bg-elevated: var(--wui-gray-800);
  --wui-bg-input: var(--wui-gray-950);
  --wui-bg-hover: var(--wui-gray-800);
  --wui-bg-active: var(--wui-gray-700);
  --wui-bg-disabled: var(--wui-gray-950);
  --wui-bg-overlay: var(--wui-alpha-black-50);
  --wui-button-surface: var(--wui-gray-800);
  --wui-button-surface-hover: var(--wui-gray-700);
  --wui-button-surface-active: var(--wui-gray-600);
  --wui-on-button-surface: var(--wui-white);
  --wui-page-bg: var(--wui-bg-page);
  --wui-header-bg: var(--wui-bg-header);
  --wui-sidebar-bg: var(--wui-bg-sidebar);
  --wui-card-bg: var(--wui-bg-card);
  --wui-raised-bg: var(--wui-bg-elevated);
  --wui-input-bg: var(--wui-bg-input);
  --wui-subtle-bg: var(--wui-bg-hover);
  --wui-overlay-bg: var(--wui-bg-overlay);
  /* Border roles mirror the light theme while reversing neutral intensity. */
  --wui-border-soft: var(--wui-gray-800);
  --wui-border-default: var(--wui-gray-700);
  --wui-border-strong: var(--wui-gray-400);
  --wui-control-border: var(--wui-gray-500);
  --wui-control-border-hover: var(--wui-border-strong);
  --wui-control-border-focus: var(--wui-accent-strong);
  --wui-control-border-disabled: var(--wui-gray-700);
  --wui-control-border-valid: var(--wui-palette-success);
  --wui-control-border-invalid: color-mix(in srgb, var(--wui-palette-danger) 60%, var(--wui-white));
  --wui-popup-border: var(--wui-gray-400);
  --wui-line-color: var(--wui-border-soft);
  /* Shared interaction states retain identical tone-only selection meaning across themes. */
  --wui-state-hover-surface: var(--wui-bg-hover);
  --wui-state-active-surface: var(--wui-bg-active);
  --wui-state-selected-surface: var(--wui-action-primary-soft);
  --wui-state-selected-border: transparent;
  --wui-state-selected-text: var(--wui-accent-text);
  --wui-state-open-surface: var(--wui-action-primary-soft);
  --wui-state-open-border: var(--wui-accent-strong);
  --wui-state-open-text: var(--wui-accent-text);
  --wui-state-disabled-surface: var(--wui-bg-disabled);
  --wui-state-disabled-border: var(--wui-control-border-disabled);
  --wui-state-disabled-text: var(--wui-gray-500);
  --wui-state-focus-color: var(--wui-control-border-focus);
  --wui-state-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wui-state-focus-color) 72%, transparent);
  --wui-state-valid-color: var(--wui-control-border-valid);
  --wui-state-valid-ring: 0 0 0 2px color-mix(in srgb, var(--wui-state-valid-color) 68%, transparent);
  --wui-state-invalid-color: var(--wui-control-border-invalid);
  --wui-state-invalid-surface: var(--wui-danger-soft);
  --wui-state-invalid-ring: 0 0 0 2px color-mix(in srgb, var(--wui-state-invalid-color) 68%, transparent);
  --wui-state-success-color: var(--wui-palette-success);
  --wui-state-warning-color: var(--wui-palette-warning);
  --wui-toast-success-border: var(--wui-palette-success);
  --wui-toast-warning-border: var(--wui-palette-warning);
  --wui-toast-danger-border: var(--wui-palette-danger);
  --wui-toast-info-border: var(--wui-brand-cyan);
  /* Semantic feedback stays visible without turning the interface into coloured panels. */
  --wui-success-soft: color-mix(in srgb, var(--wui-palette-success) 14%, var(--wui-bg-card));
  --wui-warning-soft: color-mix(in srgb, var(--wui-palette-warning) 14%, var(--wui-bg-card));
  --wui-danger-soft: color-mix(in srgb, var(--wui-palette-danger) 14%, var(--wui-bg-card));
  --wui-info-soft: color-mix(in srgb, var(--wui-brand-navy) 24%, var(--wui-bg-card));
  --wui-status-success-text: var(--wui-palette-success);
  --wui-status-success-secondary-text: var(--wui-gray-200);
  --wui-status-warning-text: var(--wui-palette-warning);
  --wui-status-warning-secondary-text: var(--wui-gray-200);
  --wui-status-danger-text: var(--wui-control-border-invalid);
  --wui-status-danger-secondary-text: var(--wui-gray-200);
  --wui-status-info-text: var(--wui-brand-cyan);
  --wui-status-info-secondary-text: var(--wui-gray-200);
  --wui-hover-bg: var(--wui-state-hover-surface);
  --wui-selected-bg: var(--wui-state-selected-surface);
  --wui-disabled-bg: var(--wui-state-disabled-surface);
  --wui-text-primary: var(--wui-white);
  --wui-text-secondary: var(--wui-gray-200);
  --wui-text-tertiary: var(--wui-gray-375);
  --wui-text-disabled: var(--wui-state-disabled-text);
  --wui-text-inverse: var(--wui-brand-ink);
  --wui-ring-color: var(--wui-accent-soft);
  --wui-accent-soft: color-mix(in srgb, var(--wui-accent) 18%, transparent);
  --wui-action-primary: var(--wui-accent);
  --wui-action-primary-hover: var(--wui-accent-hover);
  --wui-action-primary-soft: var(--wui-accent-soft);
  --wui-action-secondary: var(--wui-gray-200);
  --wui-action-secondary-hover: var(--wui-white);
  --wui-link-text: var(--wui-brand-cyan);
  --wui-text-link: var(--wui-link-text);
  --wui-card-shadow: 0 1px 2px rgb(0 0 0 / 52%);
  --wui-raised-shadow: 0 16px 40px rgb(0 0 0 / 72%);
  --wui-floating-shadow: 0 12px 32px rgb(0 0 0 / 56%);
  --wui-floating-shadow-hover: 0 16px 38px rgb(0 0 0 / 64%);
  --wui-overlay-shadow: 0 22px 60px rgb(0 0 0 / 68%);
  --wui-popup-shadow: var(--wui-raised-shadow);
  --wui-table-head-bg: var(--wui-gray-950);
  --wui-table-row-hover-bg: var(--wui-gray-800);
  --wui-table-row-selected-bg: var(--wui-action-primary-soft);
  --wui-input-hover-bg: var(--wui-input-bg);
  --wui-input-focus-bg: var(--wui-input-bg);
  /* Dark compatibility roles retained for legacy components. */
  --wui-secondary-soft: var(--wui-gray-900);
  --wui-info: var(--wui-status-info-text);
  --wui-on-info: var(--wui-brand-ink);
  --wui-on-success: var(--wui-brand-ink);
  --wui-on-warning: var(--wui-brand-ink);
  --wui-on-secondary-hover: var(--wui-white);
  --wui-control-off: var(--wui-gray-600);
  --wui-dropzone-border: var(--wui-gray-400);
  --wui-code-bg: var(--wui-black);
  --wui-code-text: var(--wui-gray-50);
  --wui-shadow-color: var(--wui-black);
  --wui-elevation-color: var(--wui-black);
  /* Legacy aliases */
  --wui-bg: var(--wui-page-bg);
  --wui-surface: var(--wui-bg-card);
  --wui-surface-2: var(--wui-subtle-bg);
  --wui-surface-alt: var(--wui-subtle-bg);
  --wui-surface-subtle: var(--wui-subtle-bg);
  --wui-surface-hover: var(--wui-state-hover-surface);
  --wui-text: var(--wui-text-primary);
  --wui-text-muted: var(--wui-text-tertiary);
  --wui-muted: var(--wui-text-tertiary);
  --wui-sidebar: var(--wui-sidebar-bg);
  --wui-sidebar-text: var(--wui-text-secondary);
  --wui-sidebar-hover: var(--wui-state-hover-surface);
  --wui-sidebar-active: var(--wui-action-primary-soft);
  --wui-primary: var(--wui-brand-cyan);
  --wui-primary-hover: var(--wui-brand-cyan-strong);
  --wui-primary-soft: var(--wui-action-primary-soft);
  --wui-primary-strong: var(--wui-accent-strong);
  --wui-on-primary: var(--wui-accent-contrast);
  --wui-on-primary-hover: var(--wui-accent-hover-contrast);
  --wui-on-primary-active: var(--wui-accent-active-contrast);
  --wui-secondary: var(--wui-brand-navy);
  --wui-secondary-hover: var(--wui-brand-mid);
  --wui-focus-ring: var(--wui-state-focus-ring, 0 0 0 2px var(--wui-focus));
  --wui-shadow-sm: var(--wui-card-shadow);
  --wui-shadow-lg: var(--wui-raised-shadow);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 02 — Temel HTML ve erişilebilirlik
   ========================================================================== */
/* WUI SECTION: base */
/* =========================================================
FOUNDATION
========================================================= */
/* Base elements and accessibility. */
* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  background: var(--wui-page-bg);
}

body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background: var(--wui-page-bg);
  color: var(--wui-text-primary);
  font-family: var(--wui-font);
  font-size: var(--wui-font-md);
  line-height: var(--wui-line-normal);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }
}

button, input, select, textarea {
  font: inherit;
}

img, svg {
  max-width: 100%;
}

button {
  color: inherit;
}

::selection {
  background: var(--wui-primary-soft);
}

.wui-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: calc(-1 * var(--wui-border-width)) !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:focus-visible {
  outline: 2px solid var(--wui-state-focus-color, var(--wui-focus));
  outline-offset: 2px;
}

.wui-check input:focus-visible {
  outline: 0;
  box-shadow: none;
}

[hidden] {
  display: none !important;
}
/* Environment visibility contract. */
html:not([data-environment="development"]) [data-dev-only] { display:none !important; }
html[data-environment="production"] [data-demo-only] { display:none !important; }
.wui-demo-notice {
  display:flex;
  align-items:center;
  gap:var(--wui-space-3);
  margin-bottom:var(--wui-space-3);
  padding:var(--wui-space-2) var(--wui-space-3);
  border-left:3px solid var(--wui-info);
  background:var(--wui-info-soft);
  color:var(--wui-text-secondary);
  font-size:var(--wui-font-sm);
}
.wui-demo-notice strong { color:var(--wui-text-primary); white-space:nowrap; }

/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 03 — Ana yerleşim: header, sidebar ve sayfa
   ========================================================================== */
/* GRUP 02 — YERLEŞİM */
/* WUI SECTION: layout */
/* =========================================================
UYGULAMA YERLEŞİMİ
========================================================= */
/* Application shell and responsive layout. */
a {
  color: var(--wui-link-text);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .wui-topbar-brand:hover {
    color: var(--wui-primary);
    text-decoration: none;
  }
}

.wui-shell {
  min-height: 100vh;
  border: 0;
  background: var(--wui-bg);
}

.wui-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--wui-z-header);
  width: 100%;
  height: var(--wui-topbar-h);
  overflow: visible;
  background: var(--wui-header-bg);
  border: 0;
}

.wui-header::before, .wui-header::after {
  content: "";
  position: absolute;
  z-index: calc(var(--wui-z-raised) + 1);
  left: 0;
  right: 0;
  height: var(--wui-border-width);
  background: var(--wui-line-color);
  pointer-events: none;
}

.wui-header::before {
  top: 0;
}

.wui-header::after {
  bottom: 0;
}

.wui-header__actions, .wui-user-menu-trigger {
  display: flex;
  align-items: center;
}

.wui-user-menu-trigger {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.wui-topbar {
  display: grid;
  grid-template-columns: calc(2 * var(--wui-topbar-h)) minmax(0, 1fr) auto;
  align-items: stretch;
  padding: 0;
  background: var(--wui-header-bg);
  color: var(--wui-text);
  box-shadow: none;
}

.wui-topbar-left {
  grid-column: 1;
  width: calc(2 * var(--wui-topbar-h));
  min-width: calc(2 * var(--wui-topbar-h));
  height: var(--wui-topbar-h);
  display: flex;
  align-items: stretch;
  border: 0;
}

/* Dashboard header cells are complete framed tiles. Adjacent borders overlap
by one shared border width so every edge remains visually 1px. */
.wui-topbar-control {
  width: var(--wui-topbar-h);
  min-width: var(--wui-topbar-h);
  height: var(--wui-topbar-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-right: var(--wui-line);
  border-radius: 0;
  background: var(--wui-surface);
  color: var(--wui-text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}

.wui-topbar-left .wui-topbar-control:first-child {
  border-left: var(--wui-line);
}

@media (hover: hover) and (pointer: fine) {
  .wui-topbar-control:hover {
    color: var(--wui-primary);
    background: var(--wui-state-hover-surface);
    text-decoration: none;
  }
}

.wui-topbar-control:active, .wui-topbar-control[aria-pressed="true"], .wui-topbar-control[aria-expanded="true"] {
  color: var(--wui-primary);
  background: var(--wui-state-open-surface);
}

.wui-topbar-control:focus-visible {
  outline: 2px solid var(--wui-state-focus-color);
  outline-offset: -3px;
  box-shadow: none;
}

.wui-menu-toggle {
  position: relative;
  z-index: var(--wui-z-raised);
  display: flex;
  visibility: visible;
  opacity:1;
  flex: 0 0 var(--wui-topbar-h);
  width: var(--wui-topbar-h);
  min-width: var(--wui-topbar-h);
  box-shadow: none;
}

.wui-fullscreen-button {
  position: relative;
  z-index: var(--wui-z-raised);
  flex: 0 0 var(--wui-topbar-h);
  width: var(--wui-topbar-h);
  min-width: var(--wui-topbar-h);
  height: var(--wui-topbar-h);
  box-shadow: none;
}

.wui-fullscreen-button.active, .wui-fullscreen-button[aria-pressed="true"] {
  color: var(--wui-primary);
  background: var(--wui-state-selected-surface);
}

.wui-topbar-brand {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: calc(var(--wui-z-local) + 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 210px;
  height: 100%;
  gap: 0;
  padding: 0 var(--wui-space-3);
  overflow: hidden;
  transform: translateX(-50%);
  color: var(--wui-text);
  border: 0;
  background: transparent;
  white-space: nowrap;
}

.wui-topbar-brand img {
  display: block;
  object-fit: contain;
}

.wui-topbar-brand .wui-brand-full {
  display: block;
  width: min(202px, calc(100vw - 220px));
  height: auto;
  max-height: calc(var(--wui-topbar-h) - 18px);
  flex: none;
}

.wui-topbar-brand .wui-brand-full--dark {
  display: none;
}

html[data-theme="dark"] .wui-topbar-brand .wui-brand-full--light {
  display: none;
}

html[data-theme="dark"] .wui-topbar-brand .wui-brand-full--dark {
  display: block;
}

.wui-topbar-brand .wui-brand-mark {
  display: none;
  width: 30px;
  height: 30px;
  max-height: 30px;
  flex: none;
}

.wui-topbar-user {
  grid-column: 3;
  justify-self: end;
  height: var(--wui-topbar-h);
  display: flex;
  align-items: stretch;
  color: var(--wui-text);
  border: 0;
}

.wui-user-area {
  min-height: var(--wui-topbar-h);
  display: flex;
  align-items: center;
  gap: var(--wui-space-3);
  padding: 0 var(--wui-space-4);
  border: 0;
  border-radius: 0;
  background: var(--wui-surface);
  color: var(--wui-text);
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
}

.wui-header.dashboard .wui-topbar-user .wui-notification-button {
  border-left: var(--wui-line);
  border-right: var(--wui-line);
}

.wui-header.dashboard .wui-topbar-user .wui-user-area {
  margin-left: 0;
  border: 0;
  border-right: var(--wui-line);
}

@media (hover: hover) and (pointer: fine) {
  .wui-user-area:hover {
    color: var(--wui-primary);
    background: var(--wui-state-hover-surface);
  }
}

.wui-user-area.active, .wui-user-area[aria-expanded="true"] {
  color: var(--wui-primary);
  background: var(--wui-state-open-surface);
}

.wui-user-area:focus-visible {
  outline: 2px solid var(--wui-state-focus-color);
  outline-offset: -3px;
}

.wui-user-copy {
  display: grid;
  line-height: var(--wui-line-heading);
  text-align: right;
}

.wui-user-copy strong {
  color: var(--wui-text);
  font-size: var(--wui-font-sm);
}

.wui-user-copy span {
  color: var(--wui-muted);
  font-size: var(--wui-font-xs);
}

.wui-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  border: var(--wui-line);
  border-radius: 0;
  background: var(--wui-surface-2);
  color: var(--wui-text);
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1 / 1;
  font-weight: var(--wui-weight-heavy);
}

.wui-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 24%;
}

.wui-ui-icon {
  width: var(--wui-icon-md);
  height: var(--wui-icon-md);
  display: block;
  pointer-events: none;
}

.wui-sidebar {
  position: fixed;
  top: var(--wui-topbar-h);
  bottom: 0;
  left: 0;
  z-index: var(--wui-z-sidebar);
  width: var(--wui-sidebar-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(0);
  transition: transform var(--wui-motion-normal) var(--wui-ease-standard);
  background: var(--wui-sidebar-bg);
  color: var(--wui-sidebar-text);
  border: 0;
  box-shadow: none;
}

body.wui-sidebar-hidden .wui-sidebar {
  transform: translateX(calc(-1 * var(--wui-sidebar-w)));
}

.wui-sidebar[aria-hidden="true"] {
  pointer-events: none;
}

.wui-nav {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wui-nav::-webkit-scrollbar, .wui-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.wui-nav-group {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.wui-nav-group-label {
  min-height: 22px;
  display: grid;
  place-items: center;
  padding: var(--wui-space-1);
  border-right: var(--wui-line);
  border-bottom: var(--wui-line);
  color: var(--wui-text-tertiary);
  background: var(--wui-sidebar-bg);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-bold);
  letter-spacing: .08em;
  line-height: var(--wui-line-tight);
  text-transform: uppercase;
}

/* The custom scrollbar overlays the navigation instead of consuming its
width, so every menu cell keeps a complete four-sided frame. */
.wui-sidebar-scrollbar {
  position: absolute;
  z-index: var(--wui-z-raised);
  top: 3px;
  right: 1px;
  bottom: 3px;
  width: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wui-motion-fast) var(--wui-ease-standard);
}

.wui-sidebar-scrollbar.is-unused {
  display: none;
}

.wui-sidebar:hover .wui-sidebar-scrollbar, .wui-sidebar:focus-within .wui-sidebar-scrollbar, .wui-sidebar.wui-sidebar-scroll-dragging .wui-sidebar-scrollbar {
  opacity: 1;
  pointer-events: auto;
}

.wui-sidebar-scrollbar-thumb {
  position: absolute;
  inset: 0 0 auto;
  width: 5px;
  min-height: 34px;
  background: var(--wui-line-color);
  border: 0;
  border-radius: 0;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.wui-sidebar-scrollbar-thumb:hover, .wui-sidebar-scroll-dragging .wui-sidebar-scrollbar-thumb {
  background: var(--wui-text-tertiary);
}

.wui-sidebar-scroll-dragging .wui-sidebar-scrollbar-thumb {
  cursor: grabbing;
}

.wui-nav-link {
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--wui-sidebar-w);
  width: 100%;
  max-width: 100%;
  height: var(--wui-sidebar-w);
  min-height: var(--wui-sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wui-space-1);
  margin: 0;
  padding: var(--wui-space-1);
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  border-right: var(--wui-line);
  border-bottom: var(--wui-line);
  border-left: var(--wui-line);
  border-radius: 0;
  background: var(--wui-sidebar);
  color: var(--wui-sidebar-text);
  text-align: center;
  line-height: var(--wui-line-tight);
  box-shadow: none;
}

.wui-nav-link > * {
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .wui-nav-link:hover {
    color: var(--wui-text);
    background: var(--wui-sidebar-hover);
    border-color: var(--wui-line-color);
    text-decoration: none;
    box-shadow: none;
  }
}

.wui-nav-link.active, .wui-nav-link[aria-current="page"], .wui-nav-link.active:hover, .wui-nav-link[aria-current="page"]:hover {
  z-index: var(--wui-z-local);
  color: var(--wui-text);
  background: var(--wui-sidebar-active);
  border-color: transparent;
  font-weight: var(--wui-weight-semibold);
  box-shadow: none;
}

.wui-nav-link.active .wui-nav-label, .wui-nav-link[aria-current="page"] .wui-nav-label {
  color: inherit;
  font-weight: var(--wui-weight-bold);
}

.wui-nav-link:focus-visible {
  z-index: calc(var(--wui-z-local) + 1);
  outline: 2px solid var(--wui-focus);
  outline-offset: -2px;
  box-shadow: none;
}

.wui-nav-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.wui-nav-icon img {
  max-width: 24px;
  max-height: 24px;
}

.wui-nav-label {
  width: calc(var(--wui-sidebar-w) - 8px);
  display: block;
  color: inherit;
  font-size: var(--wui-font-xs);
  line-height: var(--wui-line-tight);
  font-weight: var(--wui-weight-semibold);
  white-space: normal;
  overflow-wrap: anywhere;
}

.wui-main {
  min-height: 100vh;
  margin-left: var(--wui-sidebar-w);
  padding-top: var(--wui-topbar-h);
  background: var(--wui-bg);
  transition: margin-left var(--wui-motion-normal) var(--wui-ease-standard);
}

body.wui-sidebar-hidden .wui-main {
  margin-left: 0;
}

.wui-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wui-space-4);
  margin-bottom: var(--wui-component-gap);
  padding: var(--wui-card-padding);
  border: var(--wui-line);
  background: var(--wui-surface);
  box-shadow: none;
}

.wui-page-title {
  margin: 0;
  font-size: var(--wui-font-2xl);
  letter-spacing: -.02em;
}

.wui-page-subtitle {
  margin: var(--wui-space-1) 0 0;
  color: var(--wui-muted);
}

.wui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wui-space-2);
}

.wui-page-header > .wui-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-inline-start: auto;
}

.wui-page-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wui-space-2);
}

.wui-page-toolbar__search {
  flex: 1 1 var(--wui-filter-basis);
  width: 100%;
  max-width: var(--wui-search-max);
  min-width: var(--wui-filter-min);
}

.wui-grid {
  display: grid;
  gap: var(--wui-component-gap);
}

.wui-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wui-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wui-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.wui-fallback-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: auto;
  z-index: var(--wui-z-fullscreen);
}

.wui-topbar-left .wui-menu-toggle {
  min-width: var(--wui-topbar-h);
  width: var(--wui-topbar-h);
  height: var(--wui-topbar-h);
  position: relative;
  z-index: var(--wui-z-raised);
  display: flex;
  visibility: visible;
  opacity:1;
  flex: 0 0 var(--wui-topbar-h);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: var(--wui-sidebar);
  color: var(--wui-text);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .wui-topbar-left .wui-menu-toggle:hover {
    display: flex;
    background: var(--wui-state-hover-surface);
    color: var(--wui-primary);
  }
}

.wui-topbar-left .wui-menu-toggle .wui-ui-icon {
  display: block;
  opacity:1;
}

.wui-user-area:hover .wui-user-copy strong, .wui-user-area:focus-visible .wui-user-copy strong, .wui-user-area.active .wui-user-copy strong {
  color: var(--wui-primary);
}

@media (max-width: 1180px) {
  .wui-grid-4, .wui-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wui-user-copy {
    display: none;
  }
  .wui-user-area {
    padding: 0 var(--wui-space-3);
  }
}

@media (max-width: 820px) {
  .wui-topbar {
    grid-template-columns: var(--wui-sidebar-w) minmax(0, 1fr) calc(2 * var(--wui-shell-tile-size));
  }
  .wui-topbar-left {
    width: var(--wui-sidebar-w);
    min-width: var(--wui-sidebar-w);
    height: var(--wui-topbar-h);
  }
  .wui-topbar-left .wui-topbar-control {
    flex: 0 0 var(--wui-sidebar-w);
    width: var(--wui-sidebar-w);
    min-width: var(--wui-sidebar-w);
    height: var(--wui-topbar-h);
  }
  .wui-topbar-brand {
    width: 42px;
    min-width: 42px;
    height: var(--wui-topbar-h);
    padding: 0;
    gap: 0;
  }
  html .wui-topbar-brand .wui-brand-full.wui-brand-full--light, html .wui-topbar-brand .wui-brand-full.wui-brand-full--dark {
    display: none;
  }
  .wui-topbar-brand .wui-brand-mark {
    display: block;
    width: 30px;
    height: 30px;
  }
  .wui-topbar-brand span {
    display: none;
  }
  .wui-topbar-user {
    width: calc(2 * var(--wui-shell-tile-size));
    min-width: calc(2 * var(--wui-shell-tile-size));
    height: var(--wui-topbar-h);
  }
  .wui-header.dashboard .wui-topbar-user .wui-notification-button, .wui-header.dashboard .wui-topbar-user .wui-user-area {
    flex: 0 0 var(--wui-shell-tile-size);
    width: var(--wui-shell-tile-size);
    min-width: var(--wui-shell-tile-size);
    height: var(--wui-shell-tile-size);
    min-height: var(--wui-shell-tile-size);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
  }
  .wui-header.dashboard .wui-topbar-user .wui-notification-button {
    border-left: var(--wui-line);
    border-right: var(--wui-line);
  }
  .wui-header.dashboard .wui-topbar-user .wui-user-area {
    margin-left: 0;
    border: 0;
    border-right: var(--wui-line);
  }
  .wui-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    aspect-ratio: 1 / 1;
  }
  .wui-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .wui-ui-icon {
    width: var(--wui-icon-md);
    height: var(--wui-icon-md);
  }
  .wui-sidebar {
    top: var(--wui-topbar-h);
    z-index: var(--wui-z-offcanvas);
    width: min(var(--wui-drawer-width), calc(100vw - var(--wui-space-6)));
    transform: translateX(-100%);
  }
  .wui-sidebar.is-open {
    transform: translateX(0);
  }
  .wui-nav {
    width: 100%;
  }
  .wui-nav-link {
    flex-basis: auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: var(--wui-shell-tile-size);
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--wui-space-3);
    padding: var(--wui-space-2) var(--wui-space-4);
    text-align: left;
  }
  .wui-nav-icon {
    width: 34px;
    height: 31px;
    flex-basis: 31px;
  }
  .wui-nav-label {
    width: auto;
    font-size: var(--wui-font-sm);
    line-height: var(--wui-line-snug);
    font-weight: var(--wui-weight-semibold);
    white-space: nowrap;
  }
  /* Mobile navigation is a fixed overlay; it never consumes main-content width. */
  .wui-main, body.wui-sidebar-hidden .wui-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    padding-top: var(--wui-topbar-h);
    transition: none;
  }
  .wui-page-header {
    flex-direction: column;
    padding: var(--wui-space-3);
  }
  .wui-page-header > .wui-actions {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }
  .wui-page-toolbar {
    align-items: stretch;
  }
  .wui-grid-2, .wui-grid-3, .wui-grid-4 {
    grid-template-columns: 1fr;
  }
  .wui-topbar-user .wui-avatar {
    display: block;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: 1 / 1;
  }
  .wui-topbar-user .wui-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .wui-page-title {
    font-size: var(--wui-font-title-sm);
  }
  .wui-topbar-left .wui-menu-toggle {
    display: flex;
    visibility: visible;
    opacity:1;
    min-width: var(--wui-shell-tile-size);
    width: var(--wui-shell-tile-size);
    height: var(--wui-shell-tile-size);
  }
  .wui-topbar-left .wui-fullscreen-button {
    display: none;
    visibility: hidden;
    opacity:1;
    width: 0;
    min-width: 0;
    height: 0;
    flex: 0 0 0;
    overflow: hidden;
    pointer-events: none;
  }
}

@media (max-width: 540px) {
  .wui-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .wui-actions>.wui-btn, .wui-actions>.wui-btn-group {
    flex: 1 1 140px;
  }
  .wui-actions>.wui-btn-group .wui-btn {
    flex: 1;
  }
}

@media (max-width: 420px) {
  .wui-topbar-brand {
    width: 28px;
    min-width: 28px;
  }
  .wui-topbar-brand img {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .wui-topbar-brand .wui-brand-mark {
    width: 26px;
    height: 26px;
  }
  .wui-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    aspect-ratio: 1 / 1;
  }
}

/* users tablosunda avatar alanı yoktur; baş harfler addan türetilir. */
.wui-avatar.wui-avatar-initials {
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:var(--wui-weight-heavy);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 04 — Butonlar
   ========================================================================== */
/* GRUP 03 — BİLEŞENLER */
/* WUI SECTION: components/buttons */
/* =========================================================
04.01 — COMPONENT: BUTTON
========================================================= */
/* Token-driven button family. */
.wui-btn {
  --wui-btn-bg: var(--wui-button-surface);
  --wui-btn-border: var(--wui-border-default);
  --wui-btn-fg: var(--wui-black);
  --wui-btn-hover-bg: var(--wui-button-surface-hover);
  --wui-btn-hover-border: var(--wui-border-strong);
  --wui-btn-hover-fg: var(--wui-black);
  --wui-btn-active-bg: var(--wui-button-surface-active);
  --wui-btn-active-border: var(--wui-border-strong);
  --wui-btn-active-fg: var(--wui-black);
  --wui-btn-selected-bg: var(--wui-state-selected-surface);
  --wui-btn-selected-border: var(--wui-state-selected-border);
  --wui-btn-selected-fg: var(--wui-black);
  --wui-btn-open-bg: var(--wui-state-open-surface);
  --wui-btn-open-border: var(--wui-state-open-border);
  --wui-btn-open-fg: var(--wui-black);
  --wui-btn-disabled-bg: var(--wui-state-disabled-surface);
  --wui-btn-disabled-border: var(--wui-state-disabled-border);
  --wui-btn-disabled-fg: var(--wui-black);
  --wui-btn-loader: var(--wui-primary);
  border: var(--wui-border-width) solid var(--wui-btn-border);
  background: var(--wui-btn-bg);
  color: var(--wui-btn-fg);
  border-radius: var(--wui-radius-ui);
  min-height: var(--wui-control-md);
  padding: var(--wui-space-2) var(--wui-component-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wui-space-2);
  cursor: pointer;
  font-weight: var(--wui-weight-bold);
  transition:
    background-color var(--wui-motion-fast) var(--wui-ease-standard),
    border-color var(--wui-motion-fast) var(--wui-ease-standard),
    color var(--wui-motion-fast) var(--wui-ease-standard),
    box-shadow var(--wui-motion-fast) var(--wui-ease-standard);
  box-shadow: none;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .wui-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]) {
    background: var(--wui-btn-hover-bg);
    border-color: var(--wui-btn-hover-border);
    color: var(--wui-btn-hover-fg);
    box-shadow: none;
    text-decoration: none;
  }
}

.wui-btn:active:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]) {
  background: var(--wui-btn-active-bg);
  border-color: var(--wui-btn-active-border);
  color: var(--wui-btn-active-fg);
  box-shadow: none;
}

.wui-btn[aria-pressed="true"], .wui-btn[aria-selected="true"], .wui-btn[aria-current]:not([aria-current="false"]) {
  background: var(--wui-btn-selected-bg);
  border-color: transparent;
  color: var(--wui-btn-selected-fg);
}

.wui-btn[aria-expanded="true"] {
  background: var(--wui-btn-open-bg);
  border-color: var(--wui-btn-open-border);
  color: var(--wui-btn-open-fg);
}

.wui-btn:focus-visible:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]) {
  position: relative;
  z-index: var(--wui-z-local);
  outline: 0;
  box-shadow: var(--wui-state-focus-ring);
}

.wui-btn:disabled, .wui-btn[aria-disabled="true"] {
  background: var(--wui-btn-disabled-bg);
  border-color: var(--wui-btn-disabled-border);
  color: var(--wui-btn-disabled-fg);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.wui-btn-primary {
  --wui-btn-bg: var(--wui-primary);
  --wui-btn-border: var(--wui-primary);
  --wui-btn-fg: var(--wui-white);
  --wui-btn-hover-bg: var(--wui-primary-hover);
  --wui-btn-hover-border: var(--wui-primary-hover);
  --wui-btn-hover-fg: var(--wui-white);
  --wui-btn-active-bg: var(--wui-primary-active);
  --wui-btn-active-border: var(--wui-primary-active);
  --wui-btn-active-fg: var(--wui-white);
  --wui-btn-selected-bg: var(--wui-primary-hover);
  --wui-btn-selected-border: var(--wui-primary-hover);
  --wui-btn-selected-fg: var(--wui-white);
  --wui-btn-open-bg: var(--wui-primary-hover);
  --wui-btn-open-border: var(--wui-primary-hover);
  --wui-btn-open-fg: var(--wui-white);
  --wui-btn-loader: var(--wui-white);
  --wui-btn-disabled-fg: var(--wui-white);
}

.wui-btn-secondary {
  --wui-btn-bg: var(--wui-secondary);
  --wui-btn-border: var(--wui-secondary);
  --wui-btn-fg: var(--wui-white);
  --wui-btn-hover-bg: var(--wui-secondary-hover);
  --wui-btn-hover-border: var(--wui-secondary-hover);
  --wui-btn-hover-fg: var(--wui-white);
  --wui-btn-active-bg: var(--wui-secondary-active);
  --wui-btn-active-border: var(--wui-secondary-active);
  --wui-btn-active-fg: var(--wui-white);
  --wui-btn-selected-bg: var(--wui-secondary-hover);
  --wui-btn-selected-border: var(--wui-secondary-hover);
  --wui-btn-selected-fg: var(--wui-white);
  --wui-btn-open-bg: var(--wui-secondary-hover);
  --wui-btn-open-border: var(--wui-secondary-hover);
  --wui-btn-open-fg: var(--wui-white);
  --wui-btn-loader: var(--wui-white);
  --wui-btn-disabled-fg: var(--wui-white);
}

.wui-btn-success {
  --wui-btn-bg: var(--wui-success);
  --wui-btn-border: var(--wui-success);
  --wui-btn-fg: var(--wui-white);
  --wui-btn-hover-bg: var(--wui-success-hover);
  --wui-btn-hover-border: var(--wui-success-hover);
  --wui-btn-hover-fg: var(--wui-white);
  --wui-btn-active-bg: var(--wui-success-active);
  --wui-btn-active-border: var(--wui-success-active);
  --wui-btn-active-fg: var(--wui-white);
  --wui-btn-selected-bg: var(--wui-success-hover);
  --wui-btn-selected-border: var(--wui-success-hover);
  --wui-btn-selected-fg: var(--wui-white);
  --wui-btn-open-bg: var(--wui-success-hover);
  --wui-btn-open-border: var(--wui-success-hover);
  --wui-btn-open-fg: var(--wui-white);
  --wui-btn-loader: var(--wui-white);
  --wui-btn-disabled-fg: var(--wui-white);
}

.wui-btn-warning {
  --wui-btn-bg: var(--wui-warning);
  --wui-btn-border: var(--wui-warning);
  --wui-btn-fg: var(--wui-white);
  --wui-btn-hover-bg: var(--wui-warning-hover);
  --wui-btn-hover-border: var(--wui-warning-hover);
  --wui-btn-hover-fg: var(--wui-white);
  --wui-btn-active-bg: var(--wui-warning-active);
  --wui-btn-active-border: var(--wui-warning-active);
  --wui-btn-active-fg: var(--wui-white);
  --wui-btn-selected-bg: var(--wui-warning-hover);
  --wui-btn-selected-border: var(--wui-warning-hover);
  --wui-btn-selected-fg: var(--wui-white);
  --wui-btn-open-bg: var(--wui-warning-hover);
  --wui-btn-open-border: var(--wui-warning-hover);
  --wui-btn-open-fg: var(--wui-white);
  --wui-btn-loader: var(--wui-white);
  --wui-btn-disabled-fg: var(--wui-white);
}

.wui-btn-danger, .wui-btn-danger-solid {
  --wui-btn-bg: var(--wui-danger);
  --wui-btn-border: var(--wui-danger);
  --wui-btn-fg: var(--wui-white);
  --wui-btn-hover-bg: var(--wui-danger-hover);
  --wui-btn-hover-border: var(--wui-danger-hover);
  --wui-btn-hover-fg: var(--wui-white);
  --wui-btn-active-bg: var(--wui-danger-active);
  --wui-btn-active-border: var(--wui-danger-active);
  --wui-btn-active-fg: var(--wui-white);
  --wui-btn-selected-bg: var(--wui-danger-hover);
  --wui-btn-selected-border: var(--wui-danger-hover);
  --wui-btn-selected-fg: var(--wui-white);
  --wui-btn-open-bg: var(--wui-danger-hover);
  --wui-btn-open-border: var(--wui-danger-hover);
  --wui-btn-open-fg: var(--wui-white);
  --wui-btn-loader: var(--wui-white);
  --wui-btn-disabled-fg: var(--wui-white);
}

.wui-btn-ghost {
  --wui-btn-bg: transparent;
  --wui-btn-border: transparent;
  --wui-btn-fg: var(--wui-button-neutral-text);
  --wui-btn-hover-bg: var(--wui-state-hover-surface);
  --wui-btn-hover-border: transparent;
  --wui-btn-hover-fg: var(--wui-button-neutral-text);
  --wui-btn-active-bg: var(--wui-state-active-surface);
  --wui-btn-active-border: transparent;
  --wui-btn-active-fg: var(--wui-button-neutral-text);
}

.wui-btn-sm {
  min-height: var(--wui-control-sm);
  padding: var(--wui-space-1) var(--wui-space-3);
  font-size: var(--wui-font-sm);
}

.wui-btn-icon {
  width: var(--wui-control-md);
  padding: 0;
}

.wui-input-group .wui-btn {
  border-radius: 0;
}

.wui-btn.is-loading, .wui-btn[aria-busy="true"] {
  position: relative;
  background: var(--wui-btn-bg);
  border-color: var(--wui-btn-border);
  color: transparent !important;
  opacity: 1;
  pointer-events: none;
  cursor: progress;
}

.wui-btn.is-loading > *, .wui-btn[aria-busy="true"] > * {
  visibility: hidden;
}

.wui-btn.is-loading::after, .wui-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px;
  height: 16px;
  margin: calc(-1 * var(--wui-space-2)) 0 0 calc(-1 * var(--wui-space-2));
  border: 2px solid var(--wui-btn-loader);
  border-right-color: transparent;
  animation: wui-spin var(--wui-motion-spin) linear infinite;
}

.wui-btn-group {
  display: inline-flex;
  align-items: center;
}

.wui-btn-group .wui-btn {
  border-radius: 0;
  margin-left: calc(-1 * var(--wui-border-width));
}

.wui-btn-group .wui-btn:first-child {
  margin-left: 0;
}

.wui-btn-group .wui-btn:focus-visible {
  position: relative;
  z-index: calc(var(--wui-z-local) + 1);
}

.wui-link-button {
  appearance: none;
  min-height: var(--wui-hit-target-min);
  border: 0;
  padding: var(--wui-space-1);
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--wui-link-text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .wui-link-button:hover {
    color: var(--wui-link-text);
    text-decoration-thickness: 2px;
  }
}

.wui-link-button:focus-visible {
  outline: 0;
  box-shadow: var(--wui-state-focus-ring);
}

.wui-dialog__header [data-wui-dialog-close].wui-btn-icon:not(:is(.wui-btn-primary, .wui-btn-secondary, .wui-btn-success, .wui-btn-warning, .wui-btn-danger, .wui-btn-danger-solid)) {
  --wui-btn-bg: transparent;
  --wui-btn-border: transparent;
  --wui-btn-fg: var(--wui-button-neutral-text);
  --wui-btn-hover-bg: var(--wui-surface-2);
  --wui-btn-hover-border: var(--wui-line-color);
  --wui-btn-hover-fg: var(--wui-button-neutral-text);
  width: var(--wui-control-md);
  min-width: var(--wui-control-md);
  height: var(--wui-control-md);
  min-height: var(--wui-control-md);
  padding: 0;
  font-size: var(--wui-font-2xl);
  font-weight: var(--wui-weight-regular);
  line-height: var(--wui-line-none);
}

.wui-dialog__footer .wui-btn {
  min-height: var(--wui-control-md);
  padding: var(--wui-space-2) var(--wui-space-4);
}

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

@media (max-width: 820px) {
  .wui-btn:not(.wui-btn-sm) {
    min-height: var(--wui-control-md);
  }
  .wui-btn-icon {
    width: 44px;
    min-width: 44px;
    min-height: var(--wui-control-md);
  }
}

/* Geometry ownership */
.wui-btn.is-loading::after {
  border-radius: var(--wui-radius-round);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 05 — Formlar ve alan durumları
   ========================================================================== */
/* WUI SECTION: components/forms */
/* =========================================================
04.02 — COMPONENT: FORM
========================================================= */
/* Form controls and validation. */
.wui-field {
  display: grid;
  gap: var(--wui-space-2);
  margin-bottom: var(--wui-space-4);
}

.wui-field__label, .wui-field > label {
  display: block;
  color: var(--wui-text);
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-bold);
}

.wui-help {
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
  margin-top: var(--wui-space-1);
}

.wui-control, .wui-select, .wui-textarea {
  width: 100%;
  border: var(--wui-border-width) solid var(--wui-control-border);
  background: var(--wui-input-bg);
  color: var(--wui-text-primary);
  border-radius: var(--wui-radius-ui);
  min-height: var(--wui-control-md);
  padding: var(--wui-space-2) var(--wui-space-3);
  outline: none;
  font: inherit;
  transition: background-color var(--wui-transition-fast), border-color var(--wui-transition-fast), color var(--wui-transition-fast), box-shadow var(--wui-transition-fast);
}

.wui-textarea {
  min-height: 110px;
  resize: vertical;
}

.wui-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: var(--wui-space-10);
  accent-color: var(--wui-primary-strong);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wui-text-secondary) 50%),
    linear-gradient(135deg, var(--wui-text-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .wui-control:hover:not(:disabled):not([readonly]), .wui-select:hover:not(:disabled), .wui-textarea:hover:not(:disabled):not([readonly]) {
    border-color: var(--wui-control-border-hover);
    background-color: var(--wui-input-bg);
  }
}

.wui-control::placeholder, .wui-textarea::placeholder {
  color: var(--wui-text-tertiary);
  opacity: 1;
}

.wui-control:disabled, .wui-select:disabled, .wui-textarea:disabled {
  border-color: var(--wui-control-border-disabled);
  background: var(--wui-state-disabled-surface);
  color: var(--wui-state-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}

.wui-control[readonly], .wui-textarea[readonly], .wui-control[aria-readonly="true"], .wui-textarea[aria-readonly="true"] {
  background: var(--wui-subtle-bg);
  color: var(--wui-text-primary);
  cursor: text;
}

.wui-select option {
  background: var(--wui-input-bg);
  color: var(--wui-text-primary);
}

.wui-select option:checked {
  background: linear-gradient(var(--wui-primary-strong), var(--wui-primary-strong));
  color: var(--wui-on-primary-hover);
}

.wui-select option:hover, .wui-select option:focus {
  background: var(--wui-primary-soft);
  color: var(--wui-text);
  box-shadow: var(--wui-shadow-range-fill);
}

.wui-input-group {
  display: flex;
}

.wui-input-group .wui-control {
  border-radius: 0;
}

.wui-check {
  display: inline-flex;
  align-items: center;
  gap: var(--wui-space-2);
  min-height: var(--wui-hit-target-min);
  padding: var(--wui-space-1);
  cursor: pointer;
}

.wui-check input {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--wui-primary-strong);
}

@media (hover: hover) and (pointer: fine) {
  .wui-check:hover:not(:has(input:disabled)) input {
    outline: var(--wui-border-width) solid var(--wui-control-border-hover);
    outline-offset: 1px;
  }
}

.wui-check:has(input:focus-visible) {
  box-shadow: var(--wui-state-focus-ring);
}

.wui-check:has(input:disabled) {
  color: var(--wui-state-disabled-text);
  cursor: not-allowed;
}

.wui-field__error {
  display: none;
  color: var(--wui-status-danger-text);
  font-size: var(--wui-font-sm);
  margin-top: var(--wui-space-1);
}

.wui-field.is-invalid .wui-field__error, .is-invalid + .wui-field__error, .wui-field__error.is-visible {
  display: block;
}

.wui-field.is-valid :is(.wui-control,.wui-select,.wui-textarea), :is(.wui-control,.wui-select,.wui-textarea).is-valid {
  border-color: var(--wui-state-valid-color);
}

.wui-field__success {
  display: none;
  align-items: center;
  gap: var(--wui-space-2);
  margin-top: var(--wui-space-1);
  color: var(--wui-status-success-text);
  font-size: var(--wui-font-sm);
}

.wui-field__success::before {
  content: "✓";
  font-weight: var(--wui-weight-heavy);
}

.wui-field.is-valid .wui-field__success.is-visible {
  display: flex;
}

.wui-field.is-invalid :is(.wui-control,.wui-select,.wui-textarea), :is(.wui-control,.wui-select,.wui-textarea).is-invalid, :is(.wui-control,.wui-select,.wui-textarea)[aria-invalid="true"] {
  border-color: var(--wui-state-invalid-color);
}

:is(.wui-control,.wui-textarea):-webkit-autofill, :is(.wui-control,.wui-textarea):-webkit-autofill:hover, :is(.wui-control,.wui-textarea):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--wui-text-primary);
  caret-color: var(--wui-text-primary);
  box-shadow: var(--wui-shadow-autofill);
  transition: background-color var(--wui-motion-autofill) ease-out;
}

.wui-form-row {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: var(--wui-space-4);
}

.wui-required::after {
  content: " *";
  color: var(--wui-status-danger-text);
}

.wui-password-meter {
  --wui-meter-value: 0%;
  --wui-meter-color: var(--wui-danger);
  height: 7px;
  background: var(--wui-line-color);
  border-radius: 0;
  overflow: hidden;
  margin-top: var(--wui-space-2);
}

.wui-password-meter > span {
  display: block;
  height: 100%;
  width: var(--wui-meter-value);
  background: var(--wui-meter-color);
  transition: width var(--wui-motion-normal),background var(--wui-motion-normal);
}

.wui-password-rules {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--wui-space-1) var(--wui-space-3);
  padding: 0;
  margin: var(--wui-space-2) 0 0;
  list-style: none;
  font-size: var(--wui-font-sm);
  color: var(--wui-muted);
}

.wui-password-rules li::before {
  content: "○";
  margin-right: var(--wui-space-2);
}

.wui-password-rules li.ok {
  color: var(--wui-success);
}

.wui-password-rules li.ok::before {
  content: "✓";
}

.wui-range-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wui-space-3);
  align-items: center;
}

.wui-range {
  width: 100%;
  min-height: var(--wui-hit-target-min);
  accent-color: var(--wui-primary-strong);
  cursor: pointer;
}

.wui-range-value {
  min-width: 62px;
  text-align: center;
  border: var(--wui-line);
  background: var(--wui-surface-2);
  border-radius: 0;
  padding: var(--wui-space-1) var(--wui-space-2);
  font-weight: var(--wui-weight-bold);
}

.wui-segmented {
  display: inline-flex;
  padding: var(--wui-space-1);
  border: var(--wui-line);
  border-radius: 0;
  background: var(--wui-subtle-bg);
}

.wui-segmented button {
  min-height: var(--wui-control-sm);
  border: var(--wui-border-width) solid transparent;
  background: transparent;
  color: var(--wui-text-secondary);
  padding: var(--wui-space-2) var(--wui-space-3);
  border-radius: 0;
  cursor: pointer;
  font-weight: var(--wui-weight-bold);
}

@media (hover: hover) and (pointer: fine) {
  .wui-segmented :is(button,[data-segment]):hover:not(:disabled) {
    background: var(--wui-state-hover-surface);
  }
}

.wui-segmented :is(button.active,button[aria-pressed="true"],button[aria-selected="true"]) {
  background: var(--wui-state-selected-surface);
  border-color: transparent;
  color: var(--wui-state-selected-text);
  box-shadow: none;
}

.wui-segmented button:active:not(:disabled) {
  background: var(--wui-state-active-surface);
}

.wui-segmented button:focus-visible {
  position: relative;
  z-index: var(--wui-z-local);
  outline: 0;
  box-shadow: var(--wui-state-focus-ring);
}

.wui-segmented button:disabled {
  background: var(--wui-state-disabled-surface);
  color: var(--wui-state-disabled-text);
  cursor: not-allowed;
}

.wui-control:focus, .wui-select:focus, .wui-textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus {
  border-color: var(--wui-state-focus-color);
  background-color: var(--wui-input-focus-bg);
  outline: 0;
}

.wui-control:focus-visible, .wui-select:focus-visible, .wui-textarea:focus-visible-visible, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: var(--wui-state-focus-ring);
}

/* Explicit successful validation persists through keyboard focus. */
.wui-field.is-valid :is(.wui-control,.wui-select,.wui-textarea):focus, :is(.wui-control,.wui-select,.wui-textarea).is-valid:focus, .wui-field.is-valid :is(.wui-control,.wui-select,.wui-textarea):focus-visible, :is(.wui-control,.wui-select,.wui-textarea).is-valid:focus-visible {
  border-color: var(--wui-state-valid-color);
  box-shadow: var(--wui-state-valid-ring);
}

/* Invalid is persistent; keyboard focus reinforces it instead of replacing it. */
.wui-field.is-invalid :is(.wui-control,.wui-select,.wui-textarea):focus, :is(.wui-control,.wui-select,.wui-textarea).is-invalid:focus, :is(.wui-control,.wui-select,.wui-textarea)[aria-invalid="true"]:focus, .wui-field.is-invalid :is(.wui-control,.wui-select,.wui-textarea):focus-visible, :is(.wui-control,.wui-select,.wui-textarea).is-invalid:focus-visible, :is(.wui-control,.wui-select,.wui-textarea)[aria-invalid="true"]:focus-visible {
  border-color: var(--wui-state-invalid-color);
  box-shadow: var(--wui-state-invalid-ring);
}

/* The generic native-input focus selector is intentionally broad; these
explicit forms keep invalid state stronger without using !important. */
.wui-field.is-invalid input.wui-control:not(:disabled):focus, .wui-field.is-invalid input.wui-control:not(:disabled):focus-visible, input.wui-control.is-invalid:not(:disabled):focus, input.wui-control.is-invalid:not(:disabled):focus-visible, input.wui-control[aria-invalid="true"]:not(:disabled):focus, input.wui-control[aria-invalid="true"]:not(:disabled):focus-visible {
  border-color: var(--wui-state-invalid-color);
  box-shadow: var(--wui-state-invalid-ring);
}

/* Modern Chromium uses a fully themeable select popup; older browsers keep the var(--wui-success) fallback above. */
@supports (appearance: base-select) {
  .wui-select, .wui-select::picker(select) {
    appearance: base-select;
    -webkit-appearance: base-select;
  }
  .wui-select {
    background-image: none;
  }
  .wui-select::picker-icon {
    color: var(--wui-secondary);
    transition: transform var(--wui-motion-fast) var(--wui-ease-standard);
  }
  .wui-select:open::picker-icon {
    transform: rotate(180deg);
  }
  .wui-select::picker(select) {
    margin-top: var(--wui-space-1);
    border: var(--wui-line);
    background: var(--wui-surface);
    color: var(--wui-text);
    box-shadow: var(--wui-shadow-select-menu);
  }
  .wui-select option {
    padding: var(--wui-space-2) var(--wui-space-3);
    background: var(--wui-surface);
    color: var(--wui-text);
  }
  .wui-select option:hover, .wui-select option:focus-visible {
    background: var(--wui-primary-soft);
    color: var(--wui-text);
    box-shadow: none;
  }
  .wui-select option:checked {
    background: var(--wui-primary);
    color: var(--wui-on-primary);
  }
  .wui-select option::checkmark {
    color: currentColor;
  }
}

/*
* Canonical WUI select controller.
* The real select remains the form value; the same WUI popup is used on every viewport.
*/
.wui-select-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.wui-select-shell.wui-w-auto {
  width: auto;
  min-width: 160px;
}

.wui-select-shell > .wui-select {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: var(--wui-border-width);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity:1;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

.wui-select-trigger {
  width: 100%;
  min-height: var(--wui-control-md);
  padding: var(--wui-space-2) var(--wui-space-10) var(--wui-space-2) var(--wui-space-3);
  border: var(--wui-border-width) solid var(--wui-control-border);
  background: var(--wui-input-bg);
  color: var(--wui-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  transition: background-color var(--wui-transition-fast), border-color var(--wui-transition-fast), box-shadow var(--wui-transition-fast);
}

.wui-select-trigger::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--wui-secondary);
  border-bottom: 2px solid var(--wui-secondary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--wui-motion-fast) var(--wui-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .wui-select-trigger:hover:not(:disabled) {
    border-color: var(--wui-control-border-hover);
    background: var(--wui-input-bg);
  }
}

.wui-select-trigger:focus {
  border-color: var(--wui-state-focus-color);
  outline: 0;
}

.wui-select-trigger:focus-visible {
  box-shadow: var(--wui-state-focus-ring);
}

.wui-select-shell.is-open .wui-select-trigger, .wui-select-trigger[aria-expanded="true"] {
  border-color: var(--wui-state-open-border);
  background: var(--wui-state-open-surface);
  color: var(--wui-state-open-text);
}

.wui-select-shell.is-open .wui-select-trigger::after, .wui-select-trigger[aria-expanded="true"]::after {
  transform: translateY(-30%) rotate(225deg);
}

.wui-select-trigger:disabled {
  border-color: var(--wui-control-border-disabled);
  background: var(--wui-state-disabled-surface);
  color: var(--wui-state-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}

.wui-select-shell.is-valid .wui-select-trigger {
  border-color: var(--wui-state-valid-color);
}

.wui-select-shell.is-invalid .wui-select-trigger, .wui-select-trigger[aria-invalid="true"] {
  border-color: var(--wui-state-invalid-color);
}

.wui-select-shell.is-valid .wui-select-trigger:focus-visible {
  box-shadow: var(--wui-state-valid-ring);
}

.wui-select-shell.is-invalid .wui-select-trigger:focus-visible, .wui-select-trigger[aria-invalid="true"]:focus-visible {
  box-shadow: var(--wui-state-invalid-ring);
}

.wui-select-menu {
  position: fixed;
  z-index: var(--wui-z-dropdown);
  max-height: 280px;
  overflow: auto;
  padding: var(--wui-space-1) 0;
}

.wui-select-group-label {
  padding:var(--wui-space-2) var(--wui-space-3);
  color:var(--wui-muted);
  font-size:var(--wui-font-xs);
  font-weight:var(--wui-weight-bold)
}

.wui-select-option {
  min-height: var(--wui-control-md);
  padding: var(--wui-space-2) var(--wui-space-3);
  border: 0;
  background: var(--wui-raised-bg);
  color: var(--wui-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .wui-select-option:hover:not([aria-disabled="true"]) {
    background: var(--wui-state-hover-surface);
  }
}

.wui-select-option.is-active {
  background: var(--wui-state-active-surface);
}

.wui-select-option[aria-selected="true"] {
  background: var(--wui-state-selected-surface);
  color: var(--wui-state-selected-text);
  font-weight: var(--wui-weight-semibold);
}

.wui-select-option[aria-selected="true"]::after {
  content: "✓";
  color: var(--wui-primary-strong);
  font-weight: var(--wui-weight-heavy);
}

.wui-select-option.is-active[aria-selected="true"] {
  background: var(--wui-state-selected-surface);
  box-shadow: none;
}

.wui-select-option[aria-disabled="true"] {
  background: var(--wui-state-disabled-surface);
  color: var(--wui-state-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}

@media (max-width: 820px) {
  .wui-form-row, .wui-password-rules {
    grid-template-columns: 1fr;
  }
  .wui-select-shell.wui-w-auto {
    width: 100%;
    min-width: 0;
  }
  .wui-control, .wui-select, .wui-select-trigger {
    min-height: var(--wui-control-md);
  }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 06 — Kartlar ve bildirimler
   ========================================================================== */
/* WUI SECTION: components/feedback-cards */
/* =========================================================
04.03 — COMPONENT: CARD, STATUS VE FEEDBACK
========================================================= */
/* Cards, status and feedback. */
.wui-card, .wui-panel {
  overflow: hidden;
  border: var(--wui-line);
  border-radius: var(--wui-radius-ui);
  background: var(--wui-bg-card);
  color: var(--wui-text-primary);
  box-shadow: none;
}

.wui-card-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  border-bottom: var(--wui-line);
  background: var(--wui-bg-card);
}

.wui-card-title {
  margin: 0;
  font-size: var(--wui-font-lg);
  font-weight: var(--wui-weight-bold);
}

.wui-card-header > a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--wui-space-2);
}

.wui-card:is(button,a,[role="button"]) {
  cursor: pointer;
  transition: background-color var(--wui-transition-fast), border-color var(--wui-transition-fast), box-shadow var(--wui-transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .wui-card:is(button,a,[role="button"]):hover:not([aria-disabled="true"]) {
    background: var(--wui-table-row-hover-bg);
    border-color: var(--wui-control-border-hover);
    text-decoration: none;
  }
}

.wui-card:is(button,a,[role="button"]):active:not([aria-disabled="true"]) {
  background: var(--wui-state-active-surface);
}

.wui-card:is(button,a,[role="button"]):is(.active,[aria-selected="true"],[aria-pressed="true"]) {
  background: var(--wui-state-selected-surface);
  border-color: transparent;
}

.wui-card:is(button,a,[role="button"]):focus-visible {
  outline: 0;
  box-shadow: var(--wui-state-focus-ring);
}

.wui-card:is(button,a,[role="button"])[aria-disabled="true"] {
  background: var(--wui-state-disabled-surface);
  color: var(--wui-state-disabled-text);
  pointer-events: none;
}

.wui-card-body {
  padding: var(--wui-card-padding);
}

.wui-card[data-interactive]:hover:not(.active):not([aria-selected="true"]):not([aria-pressed="true"]), .wui-panel[data-interactive]:hover:not(.active):not([aria-selected="true"]):not([aria-pressed="true"]) {
  border-color: var(--wui-control-border-hover);
  box-shadow: none;
}

.wui-kpi {
  position: relative;
  padding: var(--wui-card-padding);
}

.wui-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--wui-space-3);
}

.wui-kpi-label {
  color: var(--wui-muted);
  font-weight: var(--wui-weight-semibold);
}

.wui-kpi-value {
  margin-top: var(--wui-space-2);
  font-size: var(--wui-font-display);
  font-weight: var(--wui-weight-heavy);
  letter-spacing: -.03em;
}

.wui-kpi-meta {
  margin-top: var(--wui-space-1);
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
}

.wui-kpi-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wui-link-text);
  box-shadow: none;
  outline: 0;
  font-weight: var(--wui-weight-heavy);
}

.wui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wui-space-1);
  border-radius: 0;
  padding: var(--wui-space-1) var(--wui-space-2);
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-heavy);
  background: var(--wui-secondary-soft);
  border: var(--wui-line);
}

.wui-badge-success {
  color: var(--wui-status-success-text);
  background: var(--wui-success-soft);
  border-color: var(--wui-palette-success);
}

.wui-badge-warning {
  color: var(--wui-status-warning-text);
  background: var(--wui-warning-soft);
  border-color: var(--wui-palette-warning-strong);
}

.wui-badge-danger {
  color: var(--wui-status-danger-text);
  background: var(--wui-danger-soft);
  border-color: var(--wui-palette-danger);
}

.wui-badge-info {
  color: var(--wui-status-info-text);
  background: var(--wui-info-soft);
  border-color: var(--wui-brand-navy);
}

.wui-progress {
  --wui-meter-value: 0%;
  --wui-meter-color: var(--wui-primary);
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 0;
  background: var(--wui-line-color);
  overflow: hidden;
}

.wui-progress > span {
  display: block;
  height: 100%;
  width: var(--wui-meter-value);
  border-radius: 0;
  background: var(--wui-meter-color);
  transition: width var(--wui-motion-slow) var(--wui-ease-standard);
}

.wui-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wui-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  padding: var(--wui-space-3) var(--wui-space-4);
  border-bottom: var(--wui-line);
}

.wui-list-item > :first-child {
  min-width: 0;
}

.wui-list-item > :last-child {
  flex: 0 0 auto;
}

.wui-list-item:last-child {
  border-bottom: 0;
}

.wui-callout {
  padding: var(--wui-space-4);
  border-radius: 0;
  background: var(--wui-surface-2);
  border: var(--wui-line);
}

.wui-metric-mini .wui-progress {
  grid-column: 1/-1;
}

.wui-empty-state {
  text-align: center;
  padding: var(--wui-space-9) var(--wui-space-5);
  color: var(--wui-muted);
}

.wui-empty-state strong {
  display: block;
  color: var(--wui-text);
  font-size: var(--wui-font-lg);
  margin-bottom: var(--wui-space-1);
}

.wui-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--wui-space-3);
  border: var(--wui-line);
  border-radius: 0;
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  background: var(--wui-surface);
  box-shadow: none;
}

/* WORKAIBOX visual hierarchy */
.wui-kpi::before {
  content:none;
  display:none;
}

.wui-kpi:hover::before {
  content:none;
}

/* Canonical semantic refinements */
.wui-kpi strong {
  letter-spacing:-.02em;
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 07 — Tablolar
   ========================================================================== */
/* WUI SECTION: components/tables */
/* =========================================================
04.04 — COMPONENT: TABLE
========================================================= */
/* Tables, toolbars and pagination. */
.wui-table-wrap {
  overflow: auto;
}

.wui-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  color: var(--wui-text-primary);
}

.wui-table th {
  text-align: left;
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  color: var(--wui-text-secondary);
  font-size: var(--wui-font-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--wui-table-head-bg);
  border-bottom: var(--wui-line);
}

.wui-table td {
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  border-bottom: var(--wui-line);
  vertical-align: middle;
}

@media (hover: hover) and (pointer: fine) {
  .wui-table tbody tr:hover > * {
    background: var(--wui-table-row-hover-bg);
  }
}

.wui-table tbody tr[aria-selected="true"] > *, .wui-table tbody tr[aria-selected="true"]:hover > * {
  background: var(--wui-table-row-selected-bg);
}

.wui-table tbody tr:last-child td {
  border-bottom: 0;
}

.wui-sort-button {
  appearance: none;
  width: 100%;
  min-height: var(--wui-hit-target-min);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0 var(--wui-space-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wui-space-1);
}

.wui-sort-button::after {
  content: "↕";
  opacity:1;
  font-size: var(--wui-font-sm);
}

th[aria-sort="ascending"] .wui-sort-button::after {
  content: "↑";
  opacity:1;
  color: var(--wui-primary);
}

th[aria-sort="descending"] .wui-sort-button::after {
  content: "↓";
  opacity:1;
  color: var(--wui-primary);
}

.wui-table-footer {
  padding: var(--wui-space-3) var(--wui-space-5);
  border-top: var(--wui-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  background: var(--wui-surface-2);
}

.wui-table-summary, .wui-upload-summary {
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
}

.wui-pagination {
  display: flex;
  align-items: center;
  gap: var(--wui-space-1);
}

.wui-page-btn {
  min-width: var(--wui-hit-target-min);
  height: var(--wui-hit-target-min);
  display: grid;
  place-items: center;
  border: var(--wui-line);
  border-radius: 0;
  background: var(--wui-surface);
  color: var(--wui-text);
  cursor: pointer;
  font-weight: var(--wui-weight-bold);
  transition: background-color var(--wui-transition-fast), border-color var(--wui-transition-fast), color var(--wui-transition-fast), box-shadow var(--wui-transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .wui-page-btn:hover:not(:disabled):not([aria-current="page"]) {
    background: var(--wui-state-hover-surface);
    border-color: var(--wui-control-border-hover);
    color: var(--wui-text-primary);
    text-decoration: none;
  }
}

.wui-page-btn:active:not(:disabled):not([aria-current="page"]) {
  background: var(--wui-state-active-surface);
  border-color: var(--wui-secondary-strong);
}

.wui-page-btn.active, .wui-page-btn[aria-current="page"] {
  background: var(--wui-state-selected-surface);
  border-color: transparent;
  color: var(--wui-state-selected-text);
}

.wui-page-btn:focus-visible {
  position: relative;
  z-index: var(--wui-z-local);
  outline: 0;
  box-shadow: var(--wui-state-focus-ring);
}

.wui-page-btn:disabled {
  background: var(--wui-state-disabled-surface);
  border-color: var(--wui-state-disabled-border);
  color: var(--wui-state-disabled-text);
  opacity: 1;
  cursor: not-allowed;
}

.wui-table-empty {
  text-align: center;
  color: var(--wui-muted);
  padding: var(--wui-space-8);
}

.wui-table-empty-row td {
  padding: var(--wui-space-7) var(--wui-space-4);
  color: var(--wui-muted);
  text-align: center;
  background: var(--wui-surface);
}

@media (max-width: 820px) {
  .wui-table-footer {
    align-items: flex-start;
  }
  .wui-page-btn {
    min-width: 44px;
    height: var(--wui-control-md);
  }
  .wui-sort-button {
    min-height: var(--wui-control-md);
    padding-inline: var(--wui-space-2);
  }
}

@media (max-width: 540px) {
  .wui-pagination .wui-page-btn[data-page-number]:not(.active):not([aria-current="page"]) {
    display: none;
  }
}

.wui-table-action {
  width: var(--wui-table-action-size);
  min-width: var(--wui-table-action-size);
  height: var(--wui-table-action-size);
  min-height: var(--wui-table-action-size);
  padding: 0;
  line-height: 0;
}

.wui-table-action:not(:is(.wui-btn-primary, .wui-btn-secondary, .wui-btn-success, .wui-btn-warning, .wui-btn-danger, .wui-btn-danger-solid)) {
  --wui-btn-bg: transparent;
  --wui-btn-border: transparent;
  --wui-btn-fg: var(--wui-button-neutral-text);
  --wui-btn-hover-bg: var(--wui-state-hover-surface);
  --wui-btn-hover-border: transparent;
  --wui-btn-hover-fg: var(--wui-button-neutral-text);
  --wui-btn-active-bg: var(--wui-state-active-surface);
  --wui-btn-active-border: transparent;
  --wui-btn-active-fg: var(--wui-button-neutral-text);
  --wui-btn-selected-bg: var(--wui-state-selected-surface);
  --wui-btn-selected-border: transparent;
  --wui-btn-selected-fg: var(--wui-button-neutral-text);
  --wui-btn-open-bg: var(--wui-state-open-surface);
  --wui-btn-open-border: transparent;
  --wui-btn-open-fg: var(--wui-button-neutral-text);
  border-color:transparent;
  background:transparent;
  color:var(--wui-button-neutral-text);
}

@media (hover: hover) and (pointer: fine) {
  .wui-table-action:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: transparent;
  }
}

.wui-table-action:active:not(:disabled):not([aria-disabled="true"]), .wui-table-action[aria-pressed="true"], .wui-table-action[aria-expanded="true"] {
  border-color: transparent;
}

.wui-table-action:disabled, .wui-table-action[aria-disabled="true"] {
  background: var(--wui-btn-disabled-bg);
  border-color: var(--wui-btn-disabled-border);
  color: var(--wui-btn-disabled-fg);
}

.wui-table-action:not(:is(.wui-btn-primary, .wui-btn-secondary, .wui-btn-success, .wui-btn-warning, .wui-btn-danger, .wui-btn-danger-solid)):is(:disabled,[aria-disabled="true"]) {
  background:transparent;
  border-color:transparent;
  color:var(--wui-button-neutral-text);
}


@media (max-width: 820px) {
  .wui-table-action {
    width: 44px;
    min-width: 44px;
    height: var(--wui-control-md);
    min-height: var(--wui-control-md);
  }
}

/* Geometry ownership */
.wui-table {
  border-radius: var(--wui-radius-ui);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 08 — İçerik, sekmeler ve gezinme
   ========================================================================== */
/* WUI SECTION: components/content */
/* =========================================================
04.05 — COMPONENT: CONTENT
========================================================= */
/* Reusable content components. */
.wui-page {
  width: 100%;
  max-width: var(--wui-page-max);
  min-height: calc(100vh - var(--wui-topbar-h));
  margin: 0 auto;
  padding: var(--wui-space-5);
  background: var(--wui-bg);
}

.wui-section-title {
  margin: 0 0 var(--wui-space-3);
  font-size: var(--wui-font-xl);
}

.wui-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 0;
}

.wui-tabs {
  display: flex;
  gap: var(--wui-space-1);
  overflow-x: auto;
  border-bottom: var(--wui-line);
  background: var(--wui-bg-card);
  color: var(--wui-text-primary);
  padding: 0 var(--wui-space-1);
}

.wui-tab {
  min-height: var(--wui-control-md);
  border: 0;
  background: transparent;
  color: var(--wui-muted);
  padding: var(--wui-space-3) var(--wui-space-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: var(--wui-weight-bold);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .wui-tab:hover:not(:disabled):not([aria-selected="true"]) {
    background: var(--wui-state-hover-surface);
    color: var(--wui-text-primary);
  }
}

.wui-tab:active:not(:disabled) {
  background: var(--wui-state-active-surface);
}

.wui-tab.active, .wui-tab[aria-selected="true"] {
  color: var(--wui-state-selected-text);
  background: var(--wui-state-selected-surface);
  border-bottom-color: transparent;
}

.wui-tab:focus-visible {
  outline: 2px solid var(--wui-state-focus-color);
  outline-offset: -3px;
}

.wui-tab:disabled {
  color: var(--wui-state-disabled-text);
  background: var(--wui-state-disabled-surface);
  cursor: not-allowed;
}

body[data-page="settings"] .wui-tabs {
  max-width: 100%;
  scroll-padding-inline: var(--wui-space-2);
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  box-shadow: var(--wui-shadow-scroll-edge);
}

body[data-page="settings"] .wui-tab {
  flex: 0 0 auto;
  min-height: var(--wui-control-md);
}

.wui-tab-panel {
  display: none;
  padding-top: var(--wui-space-5);
  background: var(--wui-bg-card);
  color: var(--wui-text-primary);
}

.wui-tab-panel.active {
  display: block;
}

.wui-dropzone.dragover {
  border-color: var(--wui-primary);
  background: var(--wui-state-hover-surface);
}

.wui-upload-list {
  display: grid;
  gap: var(--wui-space-2);
  margin-top: var(--wui-space-4);
}

.wui-wizard-footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wui-space-2);
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  border-top: var(--wui-line);
  background: var(--wui-subtle-bg);
}

.wui-wizard-steps {
  display: flex;
  gap: var(--wui-space-3);
  margin-bottom: var(--wui-space-6);
}

.wui-wizard-step {
  flex: 1;
  height: 7px;
  border-radius: 0;
  background: var(--wui-line-color);
}

.wui-wizard-step.active, .wui-wizard-step.done {
  background: var(--wui-primary);
}

.wui-wizard-panel {
  display: none;
}

.wui-wizard-panel.active {
  display: block;
}

.wui-system-id {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--wui-space-2) var(--wui-space-4);
}

.wui-system-id dt {
  min-width: 0;
  color: var(--wui-muted);
}

.wui-system-id dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: var(--wui-weight-semibold);
}

.wui-metric-mini {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wui-space-2);
  margin-bottom: var(--wui-space-3);
}

.wui-col-4 {
  grid-column: span 4;
}

.wui-col-6 {
  grid-column: span 6;
}

.wui-dialog-icon {
  width: 42px;
  height: 42px;
  border: var(--wui-border-width) solid var(--wui-warning-strong);
  border-radius: 0;
  display: grid;
  place-items: center;
  font-size: var(--wui-font-xl-plus);
  background: var(--wui-warning-soft);
  color: var(--wui-status-warning-text);
}

.wui-dialog.is-danger .wui-dialog-icon {
  border-color: var(--wui-palette-danger);
  background: var(--wui-danger-soft);
  color: var(--wui-status-danger-text);
}

.wui-dialog.is-warning .wui-dialog-icon {
  border-color: var(--wui-warning-strong);
  background: var(--wui-warning-soft);
  color: var(--wui-status-warning-text);
}

.wui-dropzone {
  border: 2px dashed var(--wui-dropzone-border);
  border-radius: 0;
  padding: var(--wui-space-7);
  text-align: center;
  background: var(--wui-surface-2);
  transition: var(--wui-motion-fast);
  cursor: pointer;
  position: relative;
}

.wui-dropzone:focus-within {
  border-color: var(--wui-primary);
  box-shadow: var(--wui-focus-ring);
}

.wui-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: var(--wui-border-width);
  opacity:1;
  pointer-events: none;
}

.wui-upload-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wui-space-3);
  flex-wrap: wrap;
  margin-top: var(--wui-space-4);
}

.wui-upload-item {
  border: var(--wui-line);
  background: var(--wui-surface);
  padding: var(--wui-space-3);
  border-radius: 0;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: var(--wui-space-3);
  align-items: center;
}

.wui-upload-preview {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: var(--wui-surface-2);
  border: var(--wui-line);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-heavy);
  color: var(--wui-primary);
}

.wui-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wui-upload-meta {
  min-width: 0;
}

.wui-upload-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wui-upload-actions {
  display: flex;
  gap: var(--wui-space-1);
}

.wui-upload-state {
  display: flex;
  justify-content: space-between;
  gap: var(--wui-space-3);
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
  margin-top: var(--wui-space-1);
}

.wui-upload-item.is-error {
  border-color: var(--wui-palette-danger);
  background: var(--wui-danger-soft);
}

.wui-upload-item.is-error [data-upload-label] {
  color: var(--wui-status-danger-text);
  font-weight: var(--wui-weight-bold);
}

.wui-upload-item.is-complete {
  border-color: var(--wui-palette-success);
  background: var(--wui-success-soft);
}

.wui-upload-item.is-complete [data-upload-label] {
  color: var(--wui-status-success-text);
  font-weight: var(--wui-weight-bold);
}

.wui-disk-option {
  border: var(--wui-line);
  border-radius: 0;
  padding: var(--wui-card-padding);
  cursor: pointer;
  transition: var(--wui-motion-fast);
  background: var(--wui-surface);
}

@media (hover: hover) and (pointer: fine) {
  .wui-disk-option:hover:not(.selected):not([aria-selected="true"]) {
    border-color: var(--wui-control-border-hover);
    background: var(--wui-state-hover-surface);
  }
}

.wui-disk-option:active {
  background: var(--wui-state-active-surface);
}

.wui-disk-option:is(.selected,[aria-selected="true"]) {
  border-color: transparent;
  box-shadow: none;
  background: var(--wui-state-selected-surface);
}

.wui-disk-option:focus-within {
  box-shadow: var(--wui-state-focus-ring);
}

.wui-disk-option input {
  accent-color: var(--wui-primary-strong);
}

.wui-wizard-labels {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--wui-space-2);
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
  margin-top: calc(-1 * var(--wui-space-4));
  margin-bottom: var(--wui-space-5);
  text-align: center;
}

.wui-wizard-labels .active {
  color: var(--wui-accent-text);
  font-weight: var(--wui-weight-bold);
}

@media (max-width: 820px) {
  .wui-page {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: calc(100vh - var(--wui-topbar-h));
    padding: var(--wui-space-3);
  }
  .wui-system-id {
    grid-template-columns: 1fr;
  }
  .wui-system-id dd {
    margin-bottom: var(--wui-space-2);
  }
  .wui-col-4, .wui-col-6 {
    grid-column: 1;
  }
  .wui-upload-item {
    grid-template-columns: 40px minmax(0,1fr);
    border-radius: 0;
  }
  .wui-upload-actions {
    grid-column: 1/-1;
    justify-content: flex-end;
  }
}

@media (max-width: 540px) {
  .wui-wizard-labels {
    display: none;
  }
}

/* Registered logo previews keep the original aspect ratio and colours. */
.wui-logo-mark[src$="workaibox-brand-light.png"] {
  width:min(300px,100%);
  height:auto;
  max-height:150px;
  object-fit:contain;
  background:var(--wui-surface);
  padding:var(--wui-space-2)
}

.wui-logo-mark[src$="workaibox-mark.png"] {
  object-fit:contain
}

html[data-theme="dark"] .wui-logo-mark[src$="workaibox-brand-light.png"] {
  content:url("../images/workaibox-brand-white.png");
  background:transparent;
  padding:0
}

/* Canonical semantic refinements */
/* Canonical alert API. */
.wui-alert--success {
  border-color:var(--wui-palette-success);
  background:var(--wui-success-soft);
  color:var(--wui-status-success-text);
}

.wui-alert--warning {
  border-color:var(--wui-palette-warning-strong);
  background:var(--wui-warning-soft);
  color:var(--wui-status-warning-text);
}

.wui-alert--danger {
  border-color:var(--wui-palette-danger);
  background:var(--wui-danger-soft);
  color:var(--wui-status-danger-text);
}

.wui-alert--info {
  border-color:var(--wui-brand-navy);
  background:var(--wui-info-soft);
  color:var(--wui-status-info-text);
}

.wui-alert--success .wui-muted {
  color:var(--wui-status-success-secondary-text);
}

.wui-alert--warning .wui-muted {
  color:var(--wui-status-warning-secondary-text);
}

.wui-alert--danger .wui-muted {
  color:var(--wui-status-danger-secondary-text);
}

.wui-alert--info .wui-muted {
  color:var(--wui-status-info-secondary-text);
}

/* Geometry ownership */
.wui-tab {
  border-radius: var(--wui-radius-ui);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 09 — Dialog, menü ve diğer katmanlar
   ========================================================================== */
/* WUI SECTION: components/overlays */
/* =========================================================
OVERLAY: DRAWER, MENU, NOTIFICATION, MODAL VE TOAST
========================================================= */
/* Modal, offcanvas, notification, user menu and toast. */
/* Popup surfaces share one visual contract; individual components own only geometry and content layout. */
.wui-notification-button {
  position: relative;
}

.wui-notification-count {
  position: absolute;
  top: 15px;
  right: 15px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--wui-space-1);
  display: grid;
  place-items: center;
  border: var(--wui-border-width) solid var(--wui-primary);
  border-radius: 0;
  background: var(--wui-primary);
  color: var(--wui-on-primary);
  font-size: var(--wui-font-2xs);
  line-height: var(--wui-line-none);
  font-weight: var(--wui-weight-heavy);
}

/* Ortak kenar paneli. İçerik türü değil yalnız açılma yönü varyanttır. */
.wui-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  max-width: 100vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--wui-motion-slow) var(--wui-ease-standard), opacity var(--wui-motion-normal) var(--wui-ease-standard), visibility 0s linear var(--wui-motion-slow);
  background: var(--wui-raised-bg);
  z-index: var(--wui-z-offcanvas);
  box-shadow: none;
  will-change: transform;
}

.wui-drawer--left {
  left: 0;
  transform: translate3d(-100%,0,0);
  border-right: var(--wui-line);
}

.wui-drawer.open, .wui-drawer.is-open {
  transform: translate3d(0,0,0);
  opacity:1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

body.wui-drawer-open, body.wui-dialog-open {
  overflow: hidden;
}

.wui-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--wui-overlay-bg);
  z-index: var(--wui-z-overlay);
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--wui-motion-normal) var(--wui-ease-standard), visibility 0s linear var(--wui-motion-normal);
}

.wui-drawer-backdrop.open {
  opacity:1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.wui-notification-button.active {
  background: var(--wui-surface-2);
}

.wui-notification-panel {
  position: fixed;
  top: var(--wui-topbar-h);
  right: 0;
  z-index: var(--wui-z-notification);
  width: min(330px, 100vw);
  max-height: calc(100vh - var(--wui-topbar-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 0;
  border-right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--wui-motion-fast) var(--wui-ease-standard), transform var(--wui-motion-fast) var(--wui-ease-enter), visibility 0s linear var(--wui-motion-fast);
}

.wui-notification-panel.open, .wui-user-menu.open {
  opacity:1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.wui-notification-panel-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  border-bottom: var(--wui-line);
  background: var(--wui-bg-card);
}

.wui-notification-panel-header > div {
  display: block;
}

.wui-notification-panel-header strong {
  font-size: var(--wui-font-lg);
}

.wui-notification-panel-header > div > span {
  display: none;
}

.wui-notification-read-all {
  flex: 0 0 auto;
  min-height: 34px;
  padding: var(--wui-space-2) var(--wui-space-2);
  border: var(--wui-line);
  border-radius: 0;
  background: var(--wui-raised-bg);
  color: var(--wui-text);
  font: inherit;
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-bold);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .wui-notification-read-all:hover {
    color: var(--wui-primary);
    border-color: var(--wui-primary);
    background: var(--wui-state-hover-surface);
  }
}

.wui-notification-read-all:focus-visible {
  outline: 0;
  box-shadow: var(--wui-state-focus-ring);
}

.wui-notification-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.wui-notification-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: var(--wui-line);
  border-radius: 0;
  background: var(--wui-raised-bg);
  color: var(--wui-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .wui-notification-item:hover:not(.is-unread), .wui-toast-close:hover {
    background: var(--wui-state-hover-surface);
  }
}

.wui-notification-item:active, .wui-toast-close:active {
  background: var(--wui-state-active-surface);
}

.wui-notification-item:focus-visible, .wui-toast-close:focus-visible {
  outline: 0;
  box-shadow: var(--wui-shadow-focus-inset);
}

.wui-notification-item:is(.is-unread,[aria-current="true"]) {
  background: var(--wui-state-selected-surface);
}

.wui-notification-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--wui-space-1);
  padding: var(--wui-space-3) var(--wui-space-4);
}

.wui-notification-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--wui-font-sm);
  white-space: nowrap;
}

.wui-notification-copy small {
  color: var(--wui-muted);
  font-size: var(--wui-font-xs);
}

.wui-notification-state {
  width: 3px;
  align-self: stretch;
  justify-self: end;
  background: var(--wui-raised-bg);
}

.wui-notification-item.is-unread .wui-notification-state {
  background: var(--wui-primary);
}

.wui-notification-item:not(.is-unread) .wui-notification-state {
  background: var(--wui-raised-bg);
}

.wui-notification-panel-footer {
  min-height: 46px;
  display: grid;
  place-items: center;
  border-top: 0;
  background: var(--wui-bg-card);
}

.wui-notification-panel-footer a {
  width: 100%;
  min-height: 46px;
  display: grid;
  place-items: center;
  color: var(--wui-text);
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-heavy);
  text-decoration: none;
}

.wui-notification-panel-footer a:hover, .wui-notification-panel-footer a:focus-visible {
  color: var(--wui-primary);
  outline: none;
}

.wui-toast-stack {
  position: fixed;
  top: calc(var(--wui-topbar-h, 84px) + 12px);
  right: 12px;
  bottom: auto;
  left: auto;
  z-index: var(--wui-z-toast);
  width: min(330px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--wui-topbar-h, 84px) - 24px);
  display: flex;
  flex-direction: column;
  gap: var(--wui-space-2);
  overflow: hidden auto;
  pointer-events: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.wui-toast-stack.wui-toast-stack-auth {
  top: 12px;
}

.wui-toast {
  --wui-toast-accent: var(--wui-toast-info-border);
  --wui-toast-icon-color: var(--wui-status-info-text);
  min-height: 48px;
  flex: 0 0 auto;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--wui-space-2);
  padding: var(--wui-space-2) var(--wui-space-2) var(--wui-space-2) var(--wui-space-3);
  overflow: hidden;
  border: var(--wui-border-width) solid var(--wui-toast-accent);
  border-radius: 0;
  background: var(--wui-raised-bg);
  color: var(--wui-text-primary);
  box-shadow: var(--wui-popup-shadow);
  animation: wui-toast-in var(--wui-motion-fast) var(--wui-ease-enter);
}

.wui-toast-icon-box {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--wui-toast-icon-color);
  background: transparent;
  border: 0;
}

.wui-toast.success {
  --wui-toast-accent: var(--wui-toast-success-border);
  --wui-toast-icon-color: var(--wui-status-success-text);
}

.wui-toast.warning {
  --wui-toast-accent: var(--wui-toast-warning-border);
  --wui-toast-icon-color: var(--wui-status-warning-text);
}

.wui-toast.error, .wui-toast.danger {
  --wui-toast-accent: var(--wui-toast-danger-border);
  --wui-toast-icon-color: var(--wui-status-danger-text);
}

.wui-toast.info {
  --wui-toast-accent: var(--wui-toast-info-border);
  --wui-toast-icon-color: var(--wui-status-info-text);
}

.wui-toast-content {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--wui-space-1);
  padding: 0;
}

.wui-toast-title {
  color: var(--wui-text-primary);
  font-size: var(--wui-font-sm);
  line-height: var(--wui-line-snug);
  font-weight: var(--wui-weight-bold);
}

.wui-toast-message {
  color: var(--wui-text-secondary);
  font-size: var(--wui-font-sm);
  line-height: var(--wui-line-compact);
  overflow-wrap: anywhere;
}

.wui-toast:not(:has(.wui-toast-title)) .wui-toast-message {
  color: var(--wui-text-primary);
}

.wui-toast-close {
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wui-text-muted);
  cursor: pointer;
}

.wui-user-menu {
  position: fixed;
  z-index: calc(var(--wui-z-notification) + 1);
  border: var(--wui-border-width) solid var(--wui-popover-border);
  background: var(--wui-popover-bg);
  box-shadow: var(--wui-popup-shadow);
  isolation: isolate;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  width: min(var(--wui-menu-width), calc(100vw - (2 * var(--wui-popover-margin))));
  max-height: min(420px, calc(100dvh - var(--wui-topbar-h) - 16px));
  overflow: hidden auto;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: transform var(--wui-motion-fast) var(--wui-ease-enter), visibility 0s linear var(--wui-motion-fast);
}

.wui-user-menu-list {
  display: grid;
  background: var(--wui-popover-bg);
}

.wui-user-menu-profile {
  display: grid;
  background: var(--wui-popover-bg);
  gap: var(--wui-space-1);
  padding: var(--wui-space-3) var(--wui-space-4);
  border-bottom: var(--wui-line);
}

.wui-user-menu-profile span {
  color: var(--wui-muted);
  font-size: var(--wui-font-xs);
}

.wui-user-menu-item {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: var(--wui-space-3) var(--wui-space-4);
  color: var(--wui-text);
  border-bottom: var(--wui-line);
  background: var(--wui-popover-bg);
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-bold);
  text-decoration: none;
}

.wui-user-menu-item:last-child {
  border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .wui-user-menu-item:hover {
    color: var(--wui-primary);
    background: var(--wui-state-hover-surface);
    text-decoration: none;
  }
}

.wui-user-menu-item:active {
  background: var(--wui-state-active-surface);
}

.wui-user-menu-item:focus-visible {
  outline: 0;
  box-shadow: var(--wui-shadow-focus-inset);
  text-decoration: none;
}

.wui-user-menu-logout {
  color: var(--wui-status-danger-text);
}

@keyframes wui-toast-in {
  from {
    transform: translateY(-4px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .wui-notification-count {
    top: 7px;
    right: 7px;
    min-width: 20px;
    height: 20px;
    font-size: var(--wui-font-xs);
  }
}

@media (max-width: 540px) {
  .wui-notification-panel {
    left: 0;
    right: 0;
    width: 100%;
    border-left: 0;
  }
  .wui-toast-stack {
    top: calc(var(--wui-topbar-h, 84px) + 8px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100dvh - var(--wui-topbar-h, 84px) - 16px);
  }
  .wui-toast-stack.wui-toast-stack-auth {
    top: 8px;
  }
}

.wui-tooltip-popup {
  position: fixed;
  z-index: var(--wui-z-toast);
  max-width: min(260px, calc(100vw - 24px));
  padding: var(--wui-space-2) var(--wui-space-2);
  border: var(--wui-line);
  background: var(--wui-text);
  color: var(--wui-surface);
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-semibold);
  line-height: var(--wui-line-compact);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--wui-motion-fast) var(--wui-ease-standard), transform var(--wui-motion-fast) var(--wui-ease-standard);
}

.wui-tooltip-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Geometry ownership */
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 10 — Temel kontroller
   ========================================================================== */
/* WUI SECTION: components/controls */
/* =========================================================
WUI CORE COMPONENTS
========================================================= */
/* Framework-independent core components. */
.wui-menu {
  position: absolute;
  z-index: var(--wui-z-dropdown);
  min-width: 210px;
  padding: var(--wui-space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity var(--wui-transition-fast), transform var(--wui-transition-fast), visibility 0s linear var(--wui-motion-fast);
}

.wui-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.wui-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--wui-space-2);
  padding: var(--wui-space-2) var(--wui-space-3);
  border: 0;
  border-radius: 0;
  background: var(--wui-raised-bg);
  color: var(--wui-text-primary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .wui-menu__item:hover:not([aria-disabled="true"]) {
    background: var(--wui-state-hover-surface);
  }
}

.wui-menu__item:active:not([aria-disabled="true"]) {
  background: var(--wui-state-active-surface);
}

.wui-menu__item:is([aria-current="page"],[aria-selected="true"]) {
  background: var(--wui-state-selected-surface);
  color: var(--wui-state-selected-text);
}

.wui-menu__item:focus-visible {
  outline: 2px solid var(--wui-state-focus-color);
  outline-offset: -2px;
}

.wui-menu__item[aria-disabled="true"] {
  background: var(--wui-state-disabled-surface);
  color: var(--wui-state-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}


/* Dropdown surface contract: the panel itself is always fully opaque. */
.wui-menu, .wui-select-menu, .wui-picker-popover, .wui-data-list-export-menu, .wui-data-list-row-menu {
  background:var(--wui-popover-bg);
  border-color:var(--wui-popover-border);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.wui-menu__separator {
  height: var(--wui-border-width);
  margin: var(--wui-space-1);
  background: var(--wui-line-color);
}

.wui-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden auto;
  border: var(--wui-line);
  border-radius: 0;
  background: var(--wui-raised-bg);
  color: var(--wui-text-primary);
  box-shadow: var(--wui-raised-shadow);
}

.wui-dialog::backdrop {
  background: var(--wui-overlay-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.wui-dialog__header, .wui-dialog__footer {
  display: flex;
  align-items: center;
  gap: var(--wui-space-3);
  padding: var(--wui-space-4) var(--wui-component-padding-x);
}

.wui-dialog__header {
  justify-content: space-between;
  border-bottom: var(--wui-line);
}

.wui-dialog__body {
  padding: var(--wui-card-padding);
}

.wui-dialog__footer {
  justify-content: flex-end;
  border-top: var(--wui-line);
}

@media (max-width: 540px) {
  .wui-dialog, .wui-dialog-sm {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-left: 0;
    border-right: 0;
  }
  .wui-dialog__footer {
    position: sticky;
    bottom: 0;
    background: var(--wui-raised-bg);
  }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 11 — Takvim, tarih ve saat seçiciler
   ========================================================================== */
/* WUI SECTION: components/picker */
/* =========================================================
CALENDAR PICKERS
========================================================= */
.wui-picker-field > input.wui-picker-source[data-wui-picker-enhanced] {
  position:absolute;
  width:1px;
  height:1px;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  opacity:0;
  clip-path:inset(50%);
  pointer-events:none;
  overflow:hidden
}

.wui-picker-field {
  position:relative;
  display:flex;
  width:100%
}

.wui-picker-field .wui-control {
  width:100%;
  padding-right:var(--wui-space-11)
}

.wui-picker-trigger {
  position:absolute;
  top:1px;
  right:1px;
  width:var(--wui-control-xs);
  height:var(--wui-control-xs);
  display:grid;
  place-items:center;
  border:0;
  border-left: var(--wui-line);
  background:var(--wui-surface-2);
  cursor:pointer
}

@media (hover: hover) and (pointer: fine) {
  .wui-picker-trigger:hover {
    background:var(--wui-state-hover-surface)
  }
}

.wui-picker-trigger:focus-visible {
  outline:2px solid var(--wui-state-focus-color);
  outline-offset:-2px;
  background:var(--wui-state-open-surface)
}

.wui-picker-trigger .wui-icon {
  width:18px;
  height:18px;
  opacity:1
}

.wui-picker-popover {
  position:fixed;
  z-index:var(--wui-z-toast);
  width:286px;
  max-width:calc(100vw - var(--wui-space-4));
  max-height:calc(100dvh - var(--wui-space-4));
  overflow:auto
}

.wui-picker-popover[hidden] {
  display:none
}

.wui-date-picker-head {
  display:grid;
  grid-template-columns:38px 1fr 38px;
  align-items:center;
  border-bottom: var(--wui-line);
  background:var(--wui-surface-2)
}

.wui-date-picker-head strong {
  text-align:center;
  text-transform:capitalize;
  font-size:var(--wui-font-md)
}

.wui-date-picker-head button, .wui-picker-actions button {
  min-height:var(--wui-control-sm);
  border:0;
  background:var(--wui-surface);
  color:var(--wui-text);
  cursor:pointer;
  font:inherit
}

@media (hover: hover) and (pointer: fine) {
  .wui-date-picker-head button:hover, .wui-picker-actions button:hover {
    background:var(--wui-state-hover-surface)
  }
}

.wui-date-picker-head button:focus-visible, .wui-picker-actions button:focus-visible {
  outline:2px solid var(--wui-state-focus-color);
  outline-offset:-2px
}

.wui-date-week, .wui-date-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr)
}

.wui-date-row { display:contents }

.wui-date-grid button:disabled { cursor:not-allowed }

.wui-date-week {
  border-bottom: var(--wui-line);
  background:var(--wui-bg-card);
  color:var(--wui-text-primary)
}

.wui-date-week span {
  padding:var(--wui-space-2) var(--wui-space-1);
  text-align:center;
  color:var(--wui-muted);
  font-size:var(--wui-font-xs);
  font-weight:var(--wui-weight-bold)
}

.wui-date-grid button {
  height:var(--wui-control-xs);
  border:0;
  border-right: var(--wui-line);
  border-bottom: var(--wui-line);
  background:var(--wui-bg-card);
  color:var(--wui-text-primary);
  cursor:pointer
}

.wui-date-grid button:nth-child(7n) {
  border-right:0
}

.wui-date-grid button.is-outside {
  color:var(--wui-muted);
  background:var(--wui-surface-2)
}

@media (hover: hover) and (pointer: fine) {
  .wui-date-grid button:hover:not(.is-selected) {
    background:var(--wui-state-hover-surface)
  }
}

.wui-date-grid button:active:not(.is-selected) {
  background:var(--wui-state-active-surface)
}

.wui-date-grid button:focus-visible {
  position:relative;
  z-index:var(--wui-z-local);
  outline:2px solid var(--wui-state-focus-color);
  outline-offset:-2px
}

.wui-date-grid button.is-today {
  outline:2px solid var(--wui-primary-strong);
  outline-offset:-2px
}

.wui-date-grid button.is-selected, .wui-date-grid button[aria-selected="true"] {
  background:var(--wui-primary);
  color:var(--wui-on-primary);
  font-weight:var(--wui-weight-bold)
}

.wui-picker-actions {
  display:flex;
  justify-content:flex-end;
  border-top: var(--wui-line)
}

.wui-picker-actions button {
  padding:0 var(--wui-space-3);
  color:var(--wui-primary-strong);
  font-weight:var(--wui-weight-semibold)
}

.wui-time-picker-head {
  display:flex;
  align-items:center;
  justify-content:center;
  height:54px;
  background:var(--wui-primary);
  color:var(--wui-on-primary);
  font-size:var(--wui-font-2xl);
  font-weight:var(--wui-weight-bold)
}

.wui-time-picker-head button {
  border:0;
  background:var(--wui-surface);
  color:var(--wui-state-hover-surface);
  font:inherit;
  cursor:pointer;
  padding:0 var(--wui-space-1)
}

.wui-time-picker-head button.is-active {
  color:var(--wui-on-primary)
}

.wui-time-picker-body {
  padding:var(--wui-space-3)
}

.wui-time-face {
  position:relative;
  width:220px;
  height:220px;
  margin:auto;
  background:var(--wui-surface-2);
  touch-action:none;
  user-select:none
}

.wui-time-face:before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--wui-time-center-dot);
  height:var(--wui-time-center-dot);
  margin:calc(-1 * var(--wui-time-center-dot) / 2);
  background:var(--wui-primary);
  z-index:var(--wui-z-local-above)
}

.wui-time-hand {
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:88px;
  margin-left:calc(-1 * var(--wui-border-width));
  background:var(--wui-primary);
  transform-origin:50% 0;
  z-index:var(--wui-z-local)
}

.wui-time-option {
  position:absolute;
  width:32px;
  height:32px;
  margin:calc(-1 * var(--wui-space-4));
  border:0;
  background:var(--wui-surface);
  color:var(--wui-text);
  font-size:var(--wui-font-xs-plus);
  font-weight:var(--wui-weight-semibold);
  cursor:pointer;
  z-index:var(--wui-z-local-overlay)
}

@media (hover: hover) and (pointer: fine) {
  .wui-time-option:hover:not(.is-selected) {
    background:var(--wui-state-hover-surface)
  }
}

.wui-time-option.is-selected {
  background:var(--wui-primary);
  color:var(--wui-on-primary)
}

@media (max-width: 540px) {
  .wui-picker-popover {
    left:8px;
    right:8px;
    width:auto
  }
  .wui-time-face {
    width:210px;
    height:210px
  }
}

/* Canonical semantic refinements */
.calendar-event-color {
  width:5px;
  flex:0 0 5px;
  border-radius:0;
}

/* Geometry ownership */
.wui-time-face, .wui-time-face::before, .wui-time-option {
  border-radius: var(--wui-radius-round);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 12 — Veri listesi ve araç çubukları
   ========================================================================== */
/* WUI SECTION: components/data-list */
/* =========================================================
04.05 — COMPONENT: UNIVERSAL DATA LIST
WORKAIBOX ortak liste standardı. Sayfa yalnız kolon, filtre
ve aksiyonlarını değiştirir; shell davranışı ortaktır.
========================================================= */
.wui-data-list[data-list] {
  position: relative;
  overflow: visible;
}

.wui-data-list[data-list] > .wui-card-body {
  padding: 0;
}

.wui-data-list-toolbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--wui-space-2);
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  border-bottom: var(--wui-line);
  background: var(--wui-bg-card);
}

.wui-data-list-filters {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wui-space-2);
  min-width: 0;
}

.wui-data-list-search {
  position: relative;
  /* İki ana işlem butonuna yer açmak için arama alanı yaklaşık bir buton kadar daraltıldı. */
  flex: 1 1 220px;
  min-width: min(180px, 100%);
  max-width: var(--wui-search-max);
}

.wui-data-list-search > .wui-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: var(--wui-icon-sm);
  height: var(--wui-icon-sm);
  transform: translateY(-50%);
  color: var(--wui-text-tertiary);
  pointer-events: none;
}

.wui-data-list-search > .wui-control {
  width: 100%;
  padding-left: var(--wui-space-10);
}

.wui-data-list-filters > .wui-select, .wui-data-list-filters > .wui-select-shell {
  flex: 0 1 var(--wui-filter-basis);
  min-width: var(--wui-filter-min);
}

.wui-data-list-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--wui-space-2);
  margin-left: auto;
}

.wui-data-list-tools .wui-btn, .wui-data-list-clear {
  white-space: nowrap;
}

.wui-data-list-filter-toggle {
  display: none;
}


/* Cari Hareketler: firma + tarih aralığı seçimi tek sorgu çubuğunda. */
.wui-movement-criteria {
  flex-wrap: nowrap;
}

.wui-data-list-filters > .wui-movement-company {
  flex: 1 1 280px;
  min-width: 220px;
}

.wui-movement-date {
  flex: 0 0 154px;
  min-width: 154px;
}

.wui-movement-date > .wui-control {
  width: 100%;
}

@media (max-width: 820px) {
  .wui-movement-criteria {
    flex-wrap: wrap;
  }
  .wui-data-list-filters > .wui-movement-company {
    flex: 1 1 100%;
  }
  .wui-movement-date {
    flex: 1 1 160px;
    min-width: 150px;
  }
}

.wui-data-list-selection-bar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  padding: var(--wui-space-2) var(--wui-component-padding-x);
  border-bottom: var(--wui-line);
  background: var(--wui-state-selected-surface);
  color: var(--wui-text-primary);
}

.wui-data-list-selection-bar[hidden] {
  display: none;
}

.wui-data-list-selection-copy, .wui-data-list-selection-actions, .wui-table-footer-controls, .wui-table-page-size {
  display: flex;
  align-items: center;
}

.wui-data-list-selection-copy {
  gap: var(--wui-space-1);
  min-width: 0;
}

.wui-data-list-selection-copy strong {
  color: var(--wui-primary);
}

.wui-data-list-selection-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--wui-space-2);
}

.wui-data-list-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wui-space-2);
  min-height: 52px;
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  border-bottom: var(--wui-line);
  background: var(--wui-surface-2);
  color: var(--wui-text-secondary);
  text-align: center;
}

.wui-data-list-state[hidden] {
  display: none;
}

.wui-data-list-state[data-state="error"] {
  color: var(--wui-status-danger-text);
  background: var(--wui-danger-soft);
}

.wui-data-list.is-loading .wui-table-wrap, .wui-data-list.is-loading .wui-table-footer {
  opacity: .52;
  pointer-events: none;
}

.wui-data-list .wui-table th.wui-table-select-column, .wui-data-list .wui-table td.wui-table-select-column {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  padding-inline: var(--wui-space-2);
  text-align: center;
}

.wui-table-select-column input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--wui-primary-strong);
  cursor: pointer;
}

.wui-table-select-column input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.wui-table-primary {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--wui-space-1);
}

.wui-table-primary > strong, .wui-table-primary > a {
  color: var(--wui-text-primary);
  font-weight: var(--wui-weight-bold);
}

.wui-table-primary > small {
  color: var(--wui-text-tertiary);
}

.wui-table-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.wui-table-nowrap {
  white-space: nowrap;
}

.wui-table th.wui-table-actions-column, .wui-table td.wui-table-actions-column {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  text-align: center;
}

.wui-table-actions-column .wui-table-action {
  margin-inline: auto;
  font-size: var(--wui-font-title-sm);
  line-height: var(--wui-line-none);
}

.wui-data-list[data-sticky-actions="true"] .wui-table-actions-column {
  position: sticky;
  right: 0;
  z-index: var(--wui-z-local-overlay);
  background: var(--wui-bg-card);
  box-shadow: var(--wui-shadow-sticky-left);
}

.wui-data-list[data-sticky-actions="true"] .wui-table thead .wui-table-actions-column {
  z-index: var(--wui-z-raised-above);
  background: var(--wui-table-head-bg);
}

.wui-data-list[data-sticky-select="true"] .wui-table-select-column {
  position: sticky;
  left: 0;
  z-index: var(--wui-z-local-overlay);
  background: var(--wui-bg-card);
  box-shadow: var(--wui-shadow-sticky-right);
}

.wui-data-list[data-sticky-select="true"] .wui-table thead .wui-table-select-column {
  z-index: var(--wui-z-raised-above);
  background: var(--wui-table-head-bg);
}

@media (hover: hover) and (pointer: fine) {
  .wui-data-list[data-sticky-actions="true"] .wui-table tbody tr:hover > .wui-table-actions-column, .wui-data-list[data-sticky-select="true"] .wui-table tbody tr:hover > .wui-table-select-column {
    background: var(--wui-table-row-hover-bg);
  }
}

.wui-data-list[data-sticky-actions="true"] .wui-table tbody tr[aria-selected="true"] > .wui-table-actions-column, .wui-data-list[data-sticky-select="true"] .wui-table tbody tr[aria-selected="true"] > .wui-table-select-column {
  background: var(--wui-table-row-selected-bg);
}

.wui-table-footer-controls {
  gap: var(--wui-space-3);
  margin-left: auto;
}

.wui-table-page-size {
  gap: var(--wui-space-2);
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-sm);
  white-space: nowrap;
}

.wui-table-page-size .wui-select {
  width: 78px;
  min-width: 78px;
  min-height: var(--wui-hit-target-min);
}

.wui-data-list-export-menu, .wui-data-list-row-menu {
  position: fixed;
  z-index: var(--wui-z-dropdown);
}

.wui-data-list-export-menu {
  width: 230px;
}

.wui-data-list-row-menu {
  width: min(220px, calc(100vw - 16px));
}

.wui-data-list-export-label {
  padding: var(--wui-space-2) var(--wui-space-3) var(--wui-space-1);
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-heavy);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.wui-data-list-export-menu .wui-menu__item[role="menuitemradio"] {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
}

.wui-data-list-menu-check {
  opacity: 0;
  color: var(--wui-primary);
  text-align: right;
}

.wui-data-list-export-menu [aria-checked="true"] .wui-data-list-menu-check {
  opacity: 1;
}

.wui-data-list-paper {
  display: inline-block;
  border: 1.5px solid currentColor;
  color: var(--wui-text-tertiary);
}

.wui-data-list-paper.is-portrait {
  width: 13px;
  height: 18px;
}

.wui-data-list-paper.is-landscape {
  width: 18px;
  height: 13px;
}

.wui-menu__item[data-tone="danger"] {
  color: var(--wui-status-danger-text);
}

@media (hover: hover) and (pointer: fine) {
  .wui-menu__item[data-tone="danger"]:hover {
    background: var(--wui-danger-soft);
    color: var(--wui-status-danger-text);
  }
}

@media (max-width: 820px) {
  .wui-data-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .wui-data-list-filters {
    width: 100%;
  }
  .wui-data-list-tools {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  .wui-data-list-selection-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .wui-data-list-selection-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .wui-data-list .wui-table-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .wui-table-footer-controls {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
}

@media (max-width: 540px) {
  .wui-data-list-filters {
    display: grid;
    grid-template-columns: 1fr;
  }
  .wui-data-list-search, .wui-data-list-filters > .wui-select, .wui-data-list-filters > .wui-select-shell {
    width: 100%;
    min-width: 0;
  }
  .wui-data-list-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .wui-data-list-tools .wui-btn {
    width: 100%;
  }
  .wui-data-list-filter-toggle {
    display: inline-flex;
  }
  .wui-data-list-tools > :only-child {
    grid-column: 1 / -1;
  }
  .wui-data-list[data-list]:not([data-mobile-filters-open="true"]) .wui-data-list-filters > :not(.wui-data-list-search) {
    display: none;
  }
  .wui-table-footer-controls {
    align-items: flex-start;
    flex-direction: column;
  }
  .wui-table-page-size {
    width: 100%;
    justify-content: space-between;
  }
}


@media (max-width: 540px) {
  .wui-data-list[data-list][data-mobile-table="scroll"] .wui-table { display:table; }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table-wrap {
    overflow:visible;
    background:var(--wui-page-bg);
  }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table {
    display:block;
    width:100%;
    min-width:0;
    border:0;
    background:transparent;
  }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table thead {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody {
    display:grid;
    gap:var(--wui-space-3);
  }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody tr:not(.wui-table-empty-row) {
    display:grid;
    width:100%;
    border:var(--wui-line);
    background:var(--wui-bg-card);
  }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody td {
    position:static;
    width:100%;
    min-width:0;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(96px,34%) minmax(0,1fr);
    align-items:center;
    gap:var(--wui-space-3);
    padding:var(--wui-space-2) var(--wui-space-3);
    border:0;
    border-bottom:var(--wui-line);
    box-shadow:none;
    text-align:left;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody td:last-child { border-bottom:0; }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody td::before {
    content:attr(data-mobile-label);
    color:var(--wui-text-tertiary);
    font-size:var(--wui-font-xs);
    font-weight:var(--wui-weight-bold);
  }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody td.wui-table-select-column,
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody td.wui-table-actions-column {
    display:flex;
    justify-content:flex-end;
    width:100%;
  }
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody td.wui-table-select-column::before,
  .wui-data-list[data-list]:not([data-mobile-table="scroll"]) .wui-table tbody td.wui-table-actions-column::before { content:none; }
}

@media print {
  .wui-data-list-toolbar, .wui-data-list-selection-bar, .wui-data-list-state, .wui-data-list .wui-table-footer, .wui-table-select-column, .wui-table-actions-column, [data-print="false"] {
    display: none !important;
  }
}

/* WORKAIBOX module navigation: tabs are reserved for different views, not type filters. */
.wui-module-tabs > .wui-tabs {
  margin-bottom: var(--wui-space-3);
}

.wui-module-tabs > .wui-tab-panel {
  margin: 0;
}

.wui-module-tabs .wui-data-list {
  margin-top: 0;
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 13 — Ortak sayfa desenleri
   ========================================================================== */
/* GRUP 04 — SAYFA DÜZENLERİ */
/* WUI SECTION: pages/common */
/* =========================================================
ORTAK SAYFA DESENLERİ
========================================================= */
/* Page-specific patterns. */
.wui-auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--wui-space-6);
  background: var(--wui-bg);
}

.wui-auth-wrap {
  width: min(430px,100%);
}

body[data-page="login"] .wui-auth-wrap > .wui-card {
  border-color: var(--wui-popup-border);
  box-shadow: var(--wui-popup-shadow);
}

.wui-auth-brand {
  text-align: center;
  margin-bottom: var(--wui-space-5);
}

.wui-auth-brand img {
  width: 60px;
  height: 60px;
}

.wui-error-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--wui-space-6);
}

.wui-error-code {
  font-size: var(--wui-font-display-2xl);
  font-weight: var(--wui-weight-heavy);
  letter-spacing: -.08em;
  color: var(--wui-link-text);
  line-height: var(--wui-line-none);
}

.wui-crop-dialog {
  width: min(560px, calc(100vw - 32px));
}

.wui-crop-stage {
  width: 100%;
  height: 300px;
  padding: 0;
  background: var(--wui-code-bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0;
  user-select: none;
  touch-action: none;
}

.wui-crop-stage canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  outline: 0;
  touch-action: none;
}

.wui-crop-stage canvas:focus-visible {
  box-shadow: var(--wui-shadow-focus-inset-strong);
}

@media (max-width: 540px) {
  .wui-crop-stage {
    height: 220px;
  }
}

.wui-auth-helper {
  margin-top: var(--wui-space-4);
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
  line-height: var(--wui-line-normal);
  text-align: center;
}

@media (max-width: 820px) {
  .wui-error-code {
    font-size: var(--wui-font-display-xl);
  }
}

/* Official WORKAIBOX wordmark on authentication pages */
.wui-auth-brand .wui-auth-logo {
  width:min(330px,82vw);
  height:auto;
  max-height:150px;
  object-fit:contain;
  display:block;
  margin:0 auto var(--wui-space-5);
  background:transparent;
  padding:0
}

.wui-auth-brand .wui-auth-logo--inverse {
  display:none
}

html[data-theme="dark"] .wui-auth-brand .wui-auth-logo--default {
  display:none
}

html[data-theme="dark"] .wui-auth-brand .wui-auth-logo--inverse {
  display:block
}

/* Shared output shell reset; document geometry stays in its page module. */
@media print {
  body.wui-sidebar-hidden:has(.trade-document-page, .payment-receipt-page) .wui-main {
    margin-left: 0;
  }
}


/* Dashboard: compact summary hierarchy; no duplicate KPI footnotes. */
body[data-page="dashboard"] .dashboard-kpi-grid > .wui-kpi,
body[data-page="dashboard"] .dashboard-summary-grid > .wui-card,
body[data-page="dashboard"] .dashboard-activity-grid > .wui-card {
  height: 100%;
}

body[data-page="dashboard"] .wui-kpi-top {
  height: 100%;
  align-items: flex-start;
}

body[data-page="dashboard"] .wui-kpi-meta {
  margin-top: var(--wui-space-1);
  max-width: 30ch;
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 14 — Kayıt kartları
   ========================================================================== */
/* WUI SECTION: pages/records */
:where(html[data-style~="records"]) .wui-record-card-page {
  display: grid;
  min-width: 0;
  gap: var(--wui-component-gap);
}

:where(html[data-style~="records"]) .wui-record-hero, :where(html[data-style~="records"]) .wui-record-summary-grid, :where(html[data-style~="records"]) .wui-record-tabs-shell {
  min-width: 0;
  max-width: 100%;
}

:where(html[data-style~="records"]) .wui-record-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--wui-space-5);
  align-items: center;
  padding: var(--wui-card-padding);
  border: var(--wui-line);
  background: var(--wui-surface);
}

:where(html[data-style~="records"]) .wui-record-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--wui-space-4);
}

:where(html[data-style~="records"]) .wui-record-avatar {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: var(--wui-line);
  background: var(--wui-surface-2);
  color: var(--wui-primary);
  font-size: var(--wui-font-2xl);
  font-weight: var(--wui-weight-heavy);
  letter-spacing: -.04em;
}

:where(html[data-style~="records"]) .wui-record-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(html[data-style~="records"]) .wui-record-heading {
  min-width: 0;
}

:where(html[data-style~="records"]) .wui-record-heading h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--wui-font-2xl);
  line-height: var(--wui-line-tight);
}

:where(html[data-style~="records"]) .wui-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wui-space-2);
  align-items: center;
  margin-top: var(--wui-space-2);
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
}

:where(html[data-style~="records"]) .wui-record-meta-separator::before {
  content: '•';
  margin-right: var(--wui-space-2);
  color: var(--wui-text-tertiary);
}

:where(html[data-style~="records"]) .wui-record-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--wui-space-2);
}

:where(html[data-style~="records"]) .wui-record-mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--wui-space-2);
  border: var(--wui-line);
  background: var(--wui-surface-2);
  color: var(--wui-muted);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="records"]) .wui-record-mode-badge.is-editing {
  border-color: var(--wui-primary);
  background: var(--wui-state-selected-surface);
  color: var(--wui-state-selected-text);
}

:where(html[data-style~="records"]) .wui-record-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wui-space-3);
}

:where(html[data-style~="records"]) .wui-record-summary {
  min-width: 0;
  padding: var(--wui-space-4);
  border: var(--wui-line);
  background: var(--wui-surface);
}

:where(html[data-style~="records"]) .wui-record-summary span {
  display: block;
  color: var(--wui-muted);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="records"]) .wui-record-summary strong {
  display: block;
  margin-top: var(--wui-space-1);
  overflow-wrap: anywhere;
  font-size: var(--wui-font-xl);
}

:where(html[data-style~="records"]) .wui-record-tabs-shell {
  border: var(--wui-line);
  background: var(--wui-bg-card);
}

:where(html[data-style~="records"]) .wui-record-tabs-shell .wui-tab-panel {
  padding: var(--wui-card-padding);
}

:where(html[data-style~="records"]) .wui-record-section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--wui-component-gap);
}

:where(html[data-style~="records"]) .wui-record-section {
  grid-column: span 6;
  min-width: 0;
  border: var(--wui-line);
  background: var(--wui-surface);
}

:where(html[data-style~="records"]) .wui-record-section.is-full {
  grid-column: 1 / -1;
}

:where(html[data-style~="records"]) .wui-record-section-header {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  padding: var(--wui-space-3) var(--wui-space-4);
  border-bottom: var(--wui-line);
  background: var(--wui-surface-2);
}

:where(html[data-style~="records"]) .wui-record-section-header h3 {
  margin: 0;
  font-size: var(--wui-font-md);
}

:where(html[data-style~="records"]) .wui-record-section-body {
  padding: var(--wui-space-4);
}

:where(html[data-style~="records"]) .wui-record-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--wui-space-5);
}

:where(html[data-style~="records"]) .wui-record-field {
  min-width: 0;
  padding: var(--wui-space-3) 0;
  border-bottom: var(--wui-line);
}

:where(html[data-style~="records"]) .wui-record-field:nth-last-child(-n+2) {
  border-bottom-color: transparent;
}

:where(html[data-style~="records"]) .wui-record-field-label {
  display: block;
  margin-bottom: var(--wui-space-1);
  color: var(--wui-muted);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="records"]) .wui-record-field-value {
  min-height: 24px;
  overflow-wrap: anywhere;
  color: var(--wui-text-primary);
  font-weight: var(--wui-weight-semibold);
  line-height: var(--wui-line-normal);
}

:where(html[data-style~="records"]) .wui-record-field-value.is-muted {
  color: var(--wui-muted);
  font-weight: var(--wui-weight-regular);
}

:where(html[data-style~="records"]) .wui-record-edit-field {
  display: none;
}

:where(html[data-style~="records"]) .wui-record-card-page.is-editing .wui-record-view-field {
  display: none;
}

:where(html[data-style~="records"]) .wui-record-card-page.is-editing .wui-record-edit-field {
  display: block;
}

:where(html[data-style~="records"]) .wui-record-card-page.is-editing .wui-record-field {
  padding: var(--wui-space-2) 0 var(--wui-space-3);
}

:where(html[data-style~="records"]) .wui-record-card-page.is-editing .wui-record-field-label {
  margin-bottom: var(--wui-space-2);
}

:where(html[data-style~="records"]) .wui-record-logo-editor {
  display: none;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wui-space-3);
  margin-top: var(--wui-space-3);
}

:where(html[data-style~="records"]) .wui-record-card-page.is-editing .wui-record-logo-editor {
  display: flex;
}

:where(html[data-style~="records"]) .wui-record-logo-editor input[type="file"] {
  min-width: 0;
  max-width: 100%;
}

:where(html[data-style~="records"]) .wui-record-empty {
  padding: var(--wui-space-7) var(--wui-space-4);
  text-align: center;
  color: var(--wui-muted);
  border: var(--wui-line);
  background: var(--wui-surface-2);
}

:where(html[data-style~="records"]) .wui-record-related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  margin-bottom: var(--wui-space-3);
}

:where(html[data-style~="records"]) .wui-record-related-head h3 {
  margin: 0;
  font-size: var(--wui-font-lg);
}

:where(html[data-style~="records"]) .wui-record-related-head p {
  margin: var(--wui-space-1) 0 0;
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
}

:where(html[data-style~="records"]) .wui-record-related-table .wui-table-primary {
  min-width: 150px;
}

:where(html[data-style~="records"]) .wui-record-help {
  display: flex;
  align-items: flex-start;
  gap: var(--wui-space-2);
  margin-top: var(--wui-space-3);
  padding: var(--wui-space-3);
  border: var(--wui-line);
  background: var(--wui-surface-2);
  color: var(--wui-muted);
  font-size: var(--wui-font-sm);
}

:where(html[data-style~="records"]) .wui-record-status-toggle {
  display: flex;
  align-items: center;
  gap: var(--wui-space-2);
  min-height: var(--wui-control-md);
}

:where(html[data-style~="records"]) .wui-record-status-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--wui-primary);
}

:where(html[data-style~="records"]) .wui-record-not-found {
  padding: var(--wui-space-8);
  border: var(--wui-line);
  background: var(--wui-surface);
  text-align: center;
}

:where(html[data-style~="records"]) .wui-record-not-found h2 {
  margin-top: 0;
}

@media (max-width: 1180px) {
  :where(html[data-style~="records"]) .wui-record-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(html[data-style~="records"]) .wui-record-section {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="records"]) .wui-record-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }
  :where(html[data-style~="records"]) .wui-record-identity {
    align-items: flex-start;
  }
  :where(html[data-style~="records"]) .wui-record-avatar {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    font-size: var(--wui-font-lg);
  }
  :where(html[data-style~="records"]) .wui-record-hero-actions {
    justify-content: flex-start;
  }
  :where(html[data-style~="records"]) .wui-record-fields {
    grid-template-columns: 1fr;
  }
  :where(html[data-style~="records"]) .wui-record-field:nth-last-child(-n+2) {
    border-bottom-color: var(--wui-line-color);
  }
  :where(html[data-style~="records"]) .wui-record-field:last-child {
    border-bottom-color: transparent;
  }
}

@media (max-width: 540px) {
  :where(html[data-style~="records"]) .wui-record-tabs-shell > .wui-tabs {
    max-width: 100%;
    overflow-x: auto;
  }
  :where(html[data-style~="records"]) .wui-record-summary-grid {
    grid-template-columns: 1fr;
  }
  :where(html[data-style~="records"]) .wui-record-identity {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
  }
  :where(html[data-style~="records"]) .wui-record-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  :where(html[data-style~="records"]) .wui-record-hero-actions .wui-btn {
    width: 100%;
  }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 15 — Ürün, kullanıcı ve evrak kartı ayrıntıları
   ========================================================================== */
/* WUI SECTION: pages/record-details */
:where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-avatar {
  position: relative;
}

:where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-section-body > .wui-alert:first-child {
  margin-bottom: var(--wui-space-3);
}

:where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-field.is-wide {
  grid-column: 1 / -1;
}

:where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-field-value.is-number {
  font-variant-numeric: tabular-nums;
}

:where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-form-help {
  margin-top: var(--wui-space-2);
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-xs);
  line-height: var(--wui-line-normal);
}

:where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-file-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wui-space-2);
  margin-top: var(--wui-space-2);
}

:where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-file-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: var(--wui-line);
  background: var(--wui-subtle-bg);
}

@media (max-width: 820px) {
  :where(html[data-style~="record-details"]) .wui-master-record-page .wui-record-field.is-wide {
    grid-column: auto;
  }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 16 — AI ekranı
   ========================================================================== */
/* WUI SECTION: pages/ai */
:where(html[data-style~="ai"]) body[data-page="ai"] .ai-live-output {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 24rem;
  overflow: auto;
}
:where(html[data-style~="ai"]) body[data-page="ai"] textarea {
  display: block;
  width: 100%;
  margin-block: var(--wui-space-2);
}
:where(html[data-style~="ai"]) body[data-page="ai"] .ai-tab-body {
  padding-top: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-hero, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wui-space-4);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-hero {
  padding: var(--wui-space-4);
  border: var(--wui-line);
  background: var(--wui-raised-bg);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-main {
  min-width: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wui-space-2);
  margin-top: var(--wui-space-1);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-title-row .wui-card-title {
  margin: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .wui-overline {
  display: block;
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-bold);
  letter-spacing: .08em;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--wui-space-3);
  border: var(--wui-line);
  background: var(--wui-bg-card);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-meta > span {
  display: grid;
  gap: var(--wui-space-1);
  min-width: 116px;
  padding: var(--wui-space-2) var(--wui-space-3);
  border-right: var(--wui-line);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-meta > span:last-child {
  border-right: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-meta small, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-note, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-device-identity small, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-workload-row small, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-details summary small {
  color: var(--wui-text-tertiary);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-note {
  margin: var(--wui-space-3) 0 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-summary {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(110px, .7fr));
  gap: 0;
  margin-top: var(--wui-space-2);
  border: var(--wui-line);
  background: var(--wui-bg-card);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-device-identity, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-summary-item {
  min-width: 0;
  padding: var(--wui-space-3);
  border-right: var(--wui-line);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-summary-item:last-child {
  border-right: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-device-identity {
  display: flex;
  align-items: center;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-device-identity > div, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-summary-item {
  display: grid;
  gap: var(--wui-space-1);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-device-mark {
  width: 12px;
  height: 32px;
  flex: 0 0 auto;
  background: var(--wui-primary);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-summary-item small {
  color: var(--wui-text-tertiary);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-text-success {
  color: var(--wui-state-success-color);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--wui-space-2);
  margin-top: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-card {
  padding: var(--wui-space-3);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-head, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-head span {
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-head small, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-value span {
  color: var(--wui-text-tertiary);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-value {
  margin: var(--wui-space-3) 0 var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-value strong {
  font-size: clamp(var(--wui-font-xl-plus), 2vw, var(--wui-font-2xl));
  line-height: var(--wui-line-none);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-meter {
  height: 6px;
  overflow: hidden;
  background: var(--wui-bg-hover);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-meter > span {
  --wui-meter-value: 0%;
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--wui-primary);
  width: var(--wui-meter-value, 0%);
  transition: width var(--wui-motion-slow) var(--wui-ease-standard);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-meter-temperature > span {
  background: var(--wui-warning);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-overview-main-grid {
  margin-top: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-workload-list {
  display: grid;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-workload-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wui-space-3);
  padding: var(--wui-space-2) 0;
  border-bottom: var(--wui-line);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-workload-row:last-child {
  border-bottom: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-workload-row > div {
  display: grid;
  gap: var(--wui-space-1);
  min-width: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .wui-status-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--wui-radius-round);
  background: var(--wui-text-tertiary);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .wui-status-dot.is-ok {
  background: var(--wui-success);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .wui-status-dot.is-warning {
  background: var(--wui-warning);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .wui-status-dot.is-danger {
  background: var(--wui-danger);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-resource-list {
  display: grid;
  gap: var(--wui-space-3);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-resource-row {
  display: grid;
  grid-template-columns: 72px minmax(120px, 1fr) 88px;
  align-items: center;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-resource-row > strong {
  text-align: right;
  font-size: var(--wui-font-sm);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-service-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-service-strip > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--wui-space-2);
  align-items: center;
  padding: var(--wui-space-2);
  border: var(--wui-line);
  background: var(--wui-raised-bg);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-service-strip .wui-status-dot {
  grid-row: 1 / 3;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-service-strip small {
  color: var(--wui-muted);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-details {
  overflow: hidden;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  padding: var(--wui-space-3) var(--wui-space-4);
  cursor: pointer;
  list-style: none;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-details summary::-webkit-details-marker {
  display: none;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-details summary > span:first-child {
  display: grid;
  gap: var(--wui-space-1);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-details[open] summary {
  border-bottom: var(--wui-line);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-detail-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wui-space-4);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-system-list code {
  overflow-wrap: anywhere;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-section-head {
  margin-bottom: var(--wui-space-3);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-section-head .wui-section-title {
  margin-bottom: var(--wui-space-1);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-inline-toolbar {
  margin-bottom: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-search-control {
  max-width: var(--wui-search-compact-max);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-compat-summary, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics {
  display: grid;
  gap: 0;
  border: var(--wui-line);
  background: var(--wui-raised-bg);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: var(--wui-space-3);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-compat-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary > div, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-compat-summary > div, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics > div {
  display: grid;
  gap: var(--wui-space-1);
  padding: var(--wui-space-3);
  border-right: var(--wui-line);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary > div:last-child, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-compat-summary > div:last-child, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics > div:nth-child(3n) {
  border-right: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics > div:nth-child(-n    +3) {
  border-bottom: var(--wui-line);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary small, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-compat-summary small, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics small {
  color: var(--wui-text-tertiary);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-training-readiness {
  display: grid;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-training-readiness > div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--wui-space-2);
  padding-bottom: var(--wui-space-2);
  border-bottom: var(--wui-line);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-training-readiness > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-training-monitor-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-answer {
  min-height: 170px;
  padding: var(--wui-space-3);
  border: var(--wui-line);
  background: var(--wui-raised-bg);
  white-space: pre-wrap;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-dialog {
  width: min(800px, calc(100vw - 32px));
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wui-space-2);
  margin-bottom: var(--wui-space-4);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-steps span {
  padding: var(--wui-space-2);
  border: var(--wui-line);
  color: var(--wui-muted);
  background: var(--wui-raised-bg);
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-steps span small {
  display: block;
  margin-top: var(--wui-space-1);
  font-weight: var(--wui-weight-regular);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-steps span.is-active, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-steps span.is-done {
  color: var(--wui-state-selected-text);
  background: var(--wui-state-selected-surface);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-panel {
  display: none;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-panel.is-active {
  display: block;
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-switch-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-switch-flow span {
  padding: var(--wui-space-2) var(--wui-space-3);
  border: var(--wui-line);
  background: var(--wui-raised-bg);
}

@media (max-width: 1180px) {
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-telemetry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-device-identity {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: var(--wui-line);
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-training-monitor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-service-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-detail-columns {
    grid-template-columns: 1fr;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary > div {
    border-bottom: var(--wui-line);
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary > div:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-hero, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-section-head {
    flex-direction: column;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-telemetry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-summary-item:nth-of-type(even) {
    border-right: 0;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary > div:nth-child(3n), :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics > div:nth-child(3n) {
    border-right: var(--wui-line);
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary > div:nth-child(even), :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics > div:nth-child(even) {
    border-right: 0;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics > div:nth-child(-n    +4) {
    border-bottom: var(--wui-line);
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-resource-row {
    grid-template-columns: 60px minmax(100px, 1fr) 82px;
  }
}

@media (max-width: 540px) {
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-meta > span {
    min-width: 50%;
    border-bottom: var(--wui-line);
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-model-meta > span:nth-child(even) {
    border-right: 0;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-telemetry-grid, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-service-strip, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-wizard-steps, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-compat-summary, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-training-monitor-grid {
    grid-template-columns: 1fr;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary > div, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-compat-summary > div, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics > div {
    border-right: 0;
    border-bottom: var(--wui-line);
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-rag-summary > div:last-child, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-compat-summary > div:last-child, :where(html[data-style~="ai"]) body[data-page="ai"] .ai-test-metrics > div:last-child {
    border-bottom: 0;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-training-readiness > div {
    grid-template-columns: 1fr auto;
  }
  :where(html[data-style~="ai"]) body[data-page="ai"] .ai-training-readiness > div .wui-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

:where(html[data-style~="ai"]) body[data-page="ai"] .wui-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .wui-tab .wui-icon {
  width: var(--wui-icon-sm);
  height: var(--wui-icon-sm);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-label {
  display: inline-flex;
  align-items: center;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-metric-label .wui-icon {
  width: var(--wui-icon-sm);
  height: var(--wui-icon-sm);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-device-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--wui-bg-hover);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-device-mark .wui-icon {
  width: var(--wui-icon-md);
  height: var(--wui-icon-md);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wui-space-2);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-details-toggle .wui-icon {
  transition: transform var(--wui-motion-fast) var(--wui-ease-standard);
}

:where(html[data-style~="ai"]) body[data-page="ai"] .ai-jetson-details[open] .ai-details-toggle .wui-icon {
  transform: rotate(180deg);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 17 — Ajanda ekranı
   ========================================================================== */
/* WUI SECTION: pages/calendar */
:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-calendar-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr);
  gap: var(--wui-space-4);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-calendar-toolbar {
  display: flex;
  align-items: center;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-calendar-toolbar {
  gap: var(--wui-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--wui-space-4);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-list {
  display: flex;
  flex-direction: column;
  gap: var(--wui-space-2);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-item {
  display: flex;
  width: 100%;
  min-height: var(--wui-hit-target-min);
  gap: var(--wui-space-3);
  padding: var(--wui-space-3);
  border: var(--wui-line);
  background: var(--wui-surface);
  color: var(--wui-text);
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-item:hover {
    background: var(--wui-state-hover-surface);
  }
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-text small, :where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-text em {
  color: var(--wui-text-muted);
  font-style: normal;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-head {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  margin-bottom: var(--wui-space-3);
  text-align: center;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-head button {
  min-width: var(--wui-hit-target-min);
  min-height: var(--wui-hit-target-min);
  border: var(--wui-line);
  background: var(--wui-surface);
  color: var(--wui-text);
  font-size: var(--wui-font-title-sm);
  cursor: pointer;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-week, :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-week span {
  padding: var(--wui-space-2);
  color: var(--wui-text-muted);
  font-size: var(--wui-font-xs-plus);
  text-align: center;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day {
  min-height: 105px;
  border: var(--wui-line);
  background: var(--wui-bg-card);
  color: var(--wui-text-primary);
  padding: var(--wui-space-2);
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day:hover:not([aria-selected="true"]) {
    background: var(--wui-state-hover-surface);
  }
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day.is-empty {
  cursor: default;
  opacity: 1;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day.is-today {
  outline: 2px solid var(--wui-primary-strong);
  outline-offset: -2px;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-num {
  display: block;
  margin-bottom: var(--wui-space-1);
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-events {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--wui-space-1);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--wui-space-1);
  overflow: hidden;
  padding: var(--wui-space-1) var(--wui-space-1);
  border: var(--wui-border-width) solid var(--wui-gray-100);
  font-size: var(--wui-font-xs-plus);
  white-space: nowrap;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event-marker {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  background: var(--event-color, var(--wui-action-primary));
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-overflow {
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-2xs);
}

@media (max-width: 1180px) {
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-calendar-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-table-wrap {
    margin-inline: calc(-1 * var(--wui-space-1));
    padding-bottom: var(--wui-space-1);
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day {
    min-height: 88px;
    padding: var(--wui-space-1);
  }
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event {
    width: auto;
    min-height: 22px;
    padding: var(--wui-space-1) var(--wui-space-1);
    font-size: var(--wui-font-2xs);
  }
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event-marker {
    flex-basis: 6px;
    width: 6px;
    height: 6px;
  }
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-overflow {
    font-size: var(--wui-font-2xs);
  }
}

@media print {
  html:where([data-style~="calendar"])[data-print-orientation="landscape"] {
    page: landscape;
  }
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-calendar-grid {
  gap: var(--wui-space-3);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-calendar-toolbar {
  margin: 0;
  padding: var(--wui-space-3) var(--wui-component-padding-x);
  border-bottom: var(--wui-line);
  background: var(--wui-surface);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-calendar-grid > .wui-card:first-child .wui-card-body {
  padding: 0;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] #mainCalendar {
  padding: var(--wui-card-padding);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-control, :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-select, :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-textarea {
  border-radius: 0;
  box-shadow: none;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wui-space-4);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-head {
  grid-template-columns: var(--wui-control-md) 1fr var(--wui-control-md);
  margin: 0 0 var(--wui-space-3);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-head button, :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day, :where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-item, :where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-color, :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-dialog, :where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-modal-status {
  border-radius: 0;
  box-shadow: none;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-head button {
  min-height: var(--wui-control-md);
  font-size: var(--wui-font-xl);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-week {
  border: var(--wui-line);
  border-bottom: 0;
  background: var(--wui-surface-2);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-week span {
  padding: var(--wui-space-3) var(--wui-space-2);
  color: var(--wui-muted);
  font-weight: var(--wui-weight-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-grid {
  border-top: var(--wui-line);
  border-left: var(--wui-line);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day {
  min-height: 108px;
  border: 0;
  border-right: var(--wui-line);
  border-bottom: var(--wui-line);
}

@media (hover: hover) and (pointer: fine) {
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day:hover:not(.is-today):not([aria-selected="true"]), :where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-item:hover {
    background: var(--wui-state-hover-surface);
  }
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day.is-today {
  outline: 2px solid var(--wui-primary);
  outline-offset: -2px;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event {
  border: var(--wui-border-width) solid var(--wui-border-soft);
  border-left: 3px solid var(--event-color, var(--wui-action-primary));
  background: var(--wui-action-primary-soft);
  color: var(--wui-text-primary);
  box-shadow: none;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event[aria-selected="true"] {
  background: var(--wui-state-selected-surface);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event:focus-visible {
  outline: 0;
  border-left-color: var(--event-color, var(--wui-action-primary));
  box-shadow: var(--wui-state-focus-ring);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event.is-range-middle {
  border-left-color: color-mix(in srgb, var(--event-color, var(--wui-action-primary)) 72%, transparent);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event:is(.is-range-start,.is-range-end) {
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-list {
  gap: 0;
  border-top: var(--wui-line);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-item {
  padding: var(--wui-space-3);
  border: 0;
  border-bottom: var(--wui-line);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-item:last-child {
  border-bottom: 0;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-dialog__header, :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-dialog__footer {
  padding: var(--wui-space-3) var(--wui-component-padding-x);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-dialog__body {
  padding: var(--wui-card-padding);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  overflow: hidden;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-dialog form {
  display: flex;
  min-height: 0;
  max-height: inherit;
  flex-direction: column;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-dialog .wui-dialog__body {
  overflow: auto;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-delete-button {
  margin-right: auto;
}

@media (max-width: 820px) {
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-form-grid {
    grid-template-columns: 1fr;
  }
  :where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-day {
    min-height: 88px;
  }
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="TASK"] {
  --event-color: var(--wui-event-task);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="MEETING"] {
  --event-color: var(--wui-event-meeting);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="CALL"] {
  --event-color: var(--wui-event-call);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="REMINDER"] {
  --event-color: var(--wui-event-reminder);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="DOCUMENT_RENEWAL"] {
  --event-color: var(--wui-event-document-renewal);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="LEAVE"] {
  --event-color: var(--wui-event-leave);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="COLLECTION_REMINDER"] {
  --event-color: var(--wui-event-collection-reminder);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="PAYMENT_REMINDER"] {
  --event-color: var(--wui-event-payment-reminder);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] [data-event-type="OTHER"] {
  --event-color: var(--wui-event-other);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-color[data-event-type] {
  background: var(--event-color);
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .wui-cal-event[data-event-type] {
  background: color-mix(in srgb, var(--event-color) 11%, var(--wui-bg-card));
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-item.is-muted {
  opacity: .62;
}

:where(html[data-style~="calendar"]) body[data-page="calendar"] .calendar-event-text strong .wui-badge {
  margin-left: var(--wui-space-1);
  vertical-align: middle;
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 18 — Sohbet ekranı
   ========================================================================== */
/* WUI SECTION: pages/chat */
:where(html[data-style~="chat"]) body[data-page="chat"] .chat-page-header {
  margin-bottom:var(--wui-space-5)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-shell {
  display:grid;
  grid-template-columns:300px minmax(0,1fr) 270px;
  gap:var(--wui-space-4);
  height:calc(100vh - 190px);
  min-height:590px
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-sidebar, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-details {
  min-height:0
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-sidebar, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main {
  overflow:hidden
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-sidebar {
  display:flex;
  flex-direction:column
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-sidebar-header {
  flex:none
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-search {
  position:relative;
  padding:var(--wui-space-4) var(--wui-space-4) var(--wui-space-2)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-search .wui-icon {
  position:absolute;
  left:27px;
  top:27px;
  opacity:1
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-search .wui-control {
  padding-left:var(--wui-space-10)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-filter {
  display:flex;
  gap:var(--wui-space-2);
  padding:var(--wui-space-1) var(--wui-space-4) var(--wui-space-3)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-filter-button {
  min-height:var(--wui-hit-target-min);
  border:var(--wui-line);
  background:var(--wui-surface);
  color:var(--wui-text-muted);
  padding:var(--wui-space-2) var(--wui-space-3);
  font:inherit;
  cursor:pointer
}

@media (hover:hover) and (pointer:fine) {
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-filter-button:hover:not(.active):not([aria-selected="true"]) {
    background:var(--wui-state-hover-surface);
    color:var(--wui-text)
  }
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-filter-button:active {
  background:var(--wui-state-active-surface)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-filter-button:focus-visible {
  outline:0;
  box-shadow:var(--wui-state-focus-ring)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-filter-button:is(.active,[aria-selected="true"],[aria-pressed="true"]) {
  background:var(--wui-state-selected-surface);
  border-color:transparent;
  color:var(--wui-state-selected-text)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-filter-button:disabled {
  background:var(--wui-state-disabled-surface);
  border-color:var(--wui-state-disabled-border);
  color:var(--wui-state-disabled-text);
  cursor:not-allowed
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation-list {
  overflow:auto;
  padding:0 var(--wui-space-2) var(--wui-space-3)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation {
  width:100%;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:var(--wui-space-3);
  align-items:center;
  border:0;
  border-bottom: var(--wui-line);
  background:var(--wui-surface);
  color:inherit;
  text-align:left;
  padding:var(--wui-space-3) var(--wui-space-2);
  cursor:pointer
}

:where(html[data-style~="chat"]) body[data-page="chat"] a.chat-conversation {
  text-decoration:none
}

@media (hover: hover) and (pointer: fine) {
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation:hover:not(.active):not([aria-current="true"]) {
    background:var(--wui-table-row-hover-bg)
  }
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation:active {
  background:var(--wui-state-active-surface)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation:is(.active,[aria-current="true"]) {
  background:var(--wui-state-selected-surface)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation:is(.active,[aria-current="true"]) .chat-conversation-copy span, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation:is(.active,[aria-current="true"]) .chat-conversation-meta {
  color:var(--wui-selected-secondary-text)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation:focus-visible {
  outline:2px solid var(--wui-state-focus-color);
  outline-offset:-2px
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation img, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-active-avatar img {
  width:46px;
  height:46px;
  object-fit:cover;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation-copy {
  min-width:0
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation-copy strong, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation-copy span {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation-copy span {
  font-size:var(--wui-font-xs-plus);
  color:var(--wui-text-muted);
  margin-top:var(--wui-space-1)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation-meta {
  text-align:right;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  font-size:var(--wui-font-xs);
  color:var(--wui-text-muted)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-unread {
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  background:var(--wui-primary);
  color:var(--wui-on-primary);
  font-weight:var(--wui-weight-bold);
  font-size:var(--wui-font-xs)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-main {
  display:flex;
  flex-direction:column
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-header {
  height:72px;
  display:flex;
  align-items:center;
  gap:var(--wui-space-3);
  padding:var(--wui-space-3) var(--wui-space-4);
  border-bottom: var(--wui-line);
  flex:none
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-active-copy {
  min-width:0;
  flex:1
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-active-copy strong, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-active-copy span {
  display:block
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-active-copy>span {
  font-size:var(--wui-font-xs-plus);
  color:var(--wui-text-muted);
  margin-top:var(--wui-space-1)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-actions {
  display:flex;
  gap:var(--wui-space-2)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-mobile-back {
  display:none
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-message-search {
  display:flex;
  gap:var(--wui-space-2);
  padding:var(--wui-space-3) var(--wui-space-4);
  border-bottom: var(--wui-line)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-message-search .wui-control {
  flex:1;
  min-width:0
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-messages {
  flex:1;
  overflow:auto;
  padding:var(--wui-space-5);
  display:flex;
  flex-direction:column;
  gap:var(--wui-space-3);
  background:var(--wui-surface-alt)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble {
  max-width:min(72%,620px);
  padding:var(--wui-space-3) var(--wui-space-3);
  border: var(--wui-line);
  background:var(--wui-surface);
  align-self:flex-start;
  overflow-wrap:anywhere
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble.mine {
  align-self:flex-end;
  background:var(--wui-primary);
  border-color:var(--wui-primary);
  color:var(--wui-on-primary)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble p {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble-meta {
  display:flex;
  justify-content:flex-end;
  gap:var(--wui-space-1);
  font-size:var(--wui-font-2xs);
  opacity:1;
  margin-top:var(--wui-space-1)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-file {
  display:flex;
  align-items:center;
  gap:var(--wui-space-2);
  margin-top:var(--wui-space-2);
  padding:var(--wui-space-2);
  border: var(--wui-border-width) solid currentColor
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-file small {
  display:block;
  opacity:1
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-file > span:nth-of-type(2) {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer {
  display:flex;
  align-items:flex-end;
  gap:var(--wui-space-2);
  padding:var(--wui-space-3) var(--wui-space-4);
  border-top: var(--wui-line);
  background:var(--wui-surface);
  flex:none
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-attach-button {
  width:var(--wui-control-md);
  height:var(--wui-control-md);
  display:grid;
  place-items:center;
  border: var(--wui-line);
  cursor:pointer;
  flex:0 0 44px
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer-field {
  flex:1;
  min-width:0
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer textarea {
  resize:none;
  max-height:120px;
  min-height:var(--wui-control-md)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-attachment-preview {
  font-size:var(--wui-font-xs-plus);
  padding:var(--wui-space-2) var(--wui-space-2);
  margin-bottom:var(--wui-space-1);
  background:var(--wui-surface-alt);
  border: var(--wui-line)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-send-button {
  min-width:var(--wui-control-md);
  height:var(--wui-control-md)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-details {
  overflow:auto
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-details-header {
  text-align:center;
  padding:var(--wui-space-7) var(--wui-space-5) var(--wui-space-5);
  border-bottom: var(--wui-line);
  position:relative
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-details-close {
  display:none;
  position:absolute;
  right:10px;
  top:8px;
  border: var(--wui-line);
  background: var(--wui-surface);
  color: var(--wui-text);
  cursor: pointer
}

:where(html[data-style~="chat"]) body[data-page="chat"] .pos-remove {
  border: 0;
  background: transparent;
  color: var(--wui-status-danger-text);
  font: inherit;
  cursor: pointer
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-details-header img {
  width:82px;
  height:82px;
  object-fit:cover;
  display:block;
  margin:0 auto var(--wui-space-3)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-details-header h3 {
  margin:0 0 var(--wui-space-1)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-details-header span {
  color:var(--wui-text-muted);
  font-size:var(--wui-font-sm)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-details-body {
  padding:var(--wui-space-4)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-detail-row {
  padding:var(--wui-space-3) 0;
  border-bottom: var(--wui-line)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-detail-row span, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-detail-row strong {
  display:block
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-detail-row span {
  font-size:var(--wui-font-xs);
  color:var(--wui-text-muted);
  margin-bottom:var(--wui-space-1)
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-detail-row strong {
  font-size:var(--wui-font-sm);
  overflow-wrap:anywhere
}

@media (max-width: 1180px) {
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-shell {
    grid-template-columns:280px minmax(0,1fr)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-details {
    position:fixed;
    right:16px;
    top:86px;
    bottom:16px;
    width:300px;
    z-index:var(--wui-z-offcanvas);
    box-shadow:var(--wui-shadow-lg);
    display:none
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-details.open {
    display:block
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-details-close {
    display:block
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-page-header .wui-page-subtitle {
    display:none
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-shell {
    display:block;
    height:calc(100vh - 145px);
    min-height:500px
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-sidebar, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main {
    height:100%
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main {
    display:none
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-shell.chat-open .chat-sidebar {
    display:none
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-shell.chat-open .chat-main {
    display:flex
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-mobile-back {
    display:inline-flex
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-actions .wui-btn {
    padding-inline:var(--wui-space-3)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-messages {
    padding:var(--wui-space-4)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble {
    max-width:88%
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-send-button span:last-child {
    display:none
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-details {
    left:10px;
    right:10px;
    top:76px;
    bottom:10px;
    width:auto
  }
}

@media (max-width: 420px) {
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-header {
    gap:var(--wui-space-2);
    padding-inline:var(--wui-space-2)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-actions {
    gap:var(--wui-space-1)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-actions .wui-btn, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-mobile-back {
    width:var(--wui-control-md);
    min-width:var(--wui-control-md);
    height:var(--wui-control-md);
    padding:0
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-message-search {
    padding:var(--wui-space-2)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-message-search .wui-btn {
    min-height:var(--wui-control-md)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-messages {
    padding:var(--wui-space-3)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble {
    max-width:calc(100% - 22px)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer {
    gap:var(--wui-space-2);
    padding:var(--wui-space-2)
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-send-button {
    width:44px;
    padding:0
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-send-button .wui-icon {
    margin:0
  }
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-header {
  height:64px;
  padding:var(--wui-space-3) var(--wui-space-4);
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-messages {
  padding:var(--wui-space-5) var(--wui-space-5) var(--wui-space-4);
  gap:var(--wui-space-3);
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble {
  max-width:min(70%,620px);
  line-height:var(--wui-line-normal);
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer {
  display:block;
  padding:var(--wui-space-3) var(--wui-space-3) var(--wui-space-3);
  border-top:var(--wui-line);
  background:var(--wui-surface);
  flex:none;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer-box {
  width:100%;
  min-height:var(--wui-control-lg);
  display:flex;
  align-items:stretch;
  border:var(--wui-border-width) solid var(--wui-control-border);
  background:var(--wui-input-bg);
  transition:
    border-color var(--wui-transition-fast),
    box-shadow var(--wui-transition-fast),
    background-color var(--wui-transition-fast);
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer-box:focus-within {
  border-color:var(--wui-control-border-focus);
  box-shadow:var(--wui-state-focus-ring);
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-attach-button {
  width:var(--wui-control-lg);
  min-width:var(--wui-control-lg);
  min-height:var(--wui-control-lg);
  height:auto;
  display:grid;
  place-items:center;
  border:0;
  border-right:var(--wui-line);
  background:transparent;
  color:var(--wui-text-muted);
  cursor:pointer;
  flex:0 0 var(--wui-control-lg);
  transition:
    background-color var(--wui-transition-fast),
    color var(--wui-transition-fast);
}

@media (hover:hover) and (pointer:fine) {
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-attach-button:hover {
    background:var(--wui-state-hover-surface);
    color:var(--wui-text);
  }
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-attach-button:focus-within {
  color:var(--wui-text);
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer-field {
  flex:1;
  min-width:0;
  min-height:var(--wui-control-lg);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer textarea.wui-control {
  width:100%;
  min-height:var(--wui-control-lg);
  max-height:128px;
  padding:var(--wui-space-3) var(--wui-space-3) var(--wui-space-3);
  border:0;
  background:transparent;
  box-shadow:none;
  line-height:var(--wui-line-relaxed);
  resize:none;
  overflow-y:auto;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer textarea.wui-control:hover, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer textarea.wui-control:focus, :where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer textarea.wui-control:focus-visible {
  border:0;
  background:transparent;
  box-shadow:none;
  outline:0;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-attachment-preview {
  display:flex;
  align-items:center;
  min-height:30px;
  margin:var(--wui-space-2) var(--wui-space-2) 0;
  padding:var(--wui-space-1) var(--wui-space-2);
  border:var(--wui-line);
  background:var(--wui-surface-alt);
  color:var(--wui-text-muted);
  font-size:var(--wui-font-xs-plus);
  line-height:var(--wui-line-normal);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-attachment-preview[hidden] {
  display:none;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-send-button {
  min-width:94px;
  min-height:var(--wui-control-lg);
  height:auto;
  align-self:stretch;
  margin:0;
  border:0;
  border-left:var(--wui-border-width) solid var(--wui-primary);
  flex:0 0 auto;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-actions .wui-btn-icon {
  width:44px;
  min-width:var(--wui-control-md);
  height:var(--wui-control-md);
  padding:0;
}

@media (max-width:820px) {
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-header {
    height:60px;
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-messages {
    padding:var(--wui-space-4) var(--wui-space-3) var(--wui-space-3);
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble {
    max-width:86%;
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer {
    padding:var(--wui-space-2);
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-send-button {
    min-width:48px;
    width:48px;
    padding:0;
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-send-button span:last-child {
    display:none;
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-send-button .wui-icon {
    margin:0;
  }
}

@media (max-width:420px) {
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-main-header {
    padding-inline:var(--wui-space-2);
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-messages {
    padding:var(--wui-space-3) var(--wui-space-2);
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-bubble {
    max-width:92%;
  }
  :where(html[data-style~="chat"]) body[data-page="chat"] .chat-composer {
    padding:var(--wui-space-2);
  }
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-avatar-initials {
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:var(--wui-secondary-soft);
  color:var(--wui-text-primary);
  border:var(--wui-line);
  font-weight:var(--wui-weight-bold);
  letter-spacing:.02em;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-avatar-initials-large {
  width:82px;
  height:82px;
  margin:0 auto var(--wui-space-3);
  font-size:var(--wui-font-xl-plus);
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-conversation > .chat-avatar-initials {
  grid-column:1;
}

:where(html[data-style~="chat"]) body[data-page="chat"] .chat-active-avatar {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 19 — Ana sayfa: misafir ve üye
   ========================================================================== */
/* WUI SECTION: pages/landing */
html:where([data-style~="landing"]):has(body[data-page="index"].wui-landing) {
  scroll-behavior: smooth;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing {
  margin: 0;
  background: var(--wui-page-bg);
  color: var(--wui-text-primary);
  font-family: var(--wui-font);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-shell {
  min-height: 100vh;
  overflow: hidden;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing {
  z-index: var(--wui-z-sidebar);
  height: var(--wui-topbar-h);
  transition: background var(--wui-motion-slow) var(--wui-ease-standard), box-shadow var(--wui-motion-slow) var(--wui-ease-standard), border-color var(--wui-motion-slow) var(--wui-ease-standard);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing:not(.is-top) {
  box-shadow: var(--wui-card-shadow);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-header__inner {
  width: min(1440px, calc(100% - 48px));
  height: 100%;
  margin: auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wui-space-6);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand__logo {
  display: block;
  width: 202px;
  height: auto;
  max-height: calc(var(--wui-topbar-h) - 18px);
  object-fit: contain;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand__logo--light {
  display: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-brand__logo--default, html:where([data-style~="landing"])[data-theme="dark"] body[data-page="index"].wui-landing .landing:not(.is-top) .index-brand__logo--default {
  display: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-brand__logo--light, html:where([data-style~="landing"])[data-theme="dark"] body[data-page="index"].wui-landing .landing:not(.is-top) .index-brand__logo--light {
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand--footer {
  padding: 0;
  background: transparent;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand--footer .index-brand__logo {
  width: 224px;
  max-height: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-nav {
  position: absolute;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wui-space-2);
  transform: translateX(-50%);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-nav a {
  padding: var(--wui-space-3) var(--wui-space-4);
  border: var(--wui-line);
  color: var(--wui-text-secondary);
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-bold);
  letter-spacing: .35px;
  text-decoration: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-nav a:hover, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-nav a.is-active {
  background: var(--wui-action-primary-soft);
  color: var(--wui-text-primary);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-nav a {
  color: var(--wui-white);
  border-color: var(--wui-alpha-white-35);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-nav a:hover, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-nav a.is-active {
  background: var(--wui-alpha-white-10);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-actions {
  justify-self: end;
  gap: var(--wui-space-2);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-auth-actions {
  gap: var(--wui-space-2);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__cta {
  height: var(--wui-control-lg);
  padding-inline: var(--wui-space-5);
  text-decoration: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-auth-btn {
  min-width: 92px;
  min-height: var(--wui-control-sm);
  height: var(--wui-control-sm);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero .index-btn--outline, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-btn--outline {
  background: var(--wui-brand-ink);
  border-color: var(--wui-alpha-white-40);
  color: var(--wui-white);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-user {
  position: relative;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-user {
  display: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-user__button, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-toggle {
  width: var(--wui-topbar-h);
  min-width: var(--wui-topbar-h);
  height: var(--wui-topbar-h);
  padding: 0;
  border-radius: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-user__button {
  border: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-user__button .wui-icon {
  width: 19px;
  height: 19px;
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-toggle {
  display: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-toggle span {
  display: block;
  height: 2px;
  margin: var(--wui-space-1) 0;
  background: var(--wui-text-primary);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-mobile-toggle, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-mobile-user__button {
  background: transparent;
  color: var(--wui-white);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-mobile-toggle {
  border-color: var(--wui-alpha-white-35);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-mobile-toggle:hover, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-mobile-user__button:hover {
  background: var(--wui-alpha-white-10);
  box-shadow: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-mobile-toggle:hover {
  border-color: var(--wui-alpha-white-35);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing.is-top .index-mobile-toggle span {
  background: var(--wui-white);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero {
  position: relative;
  min-height: 670px;
  overflow: hidden;
  background: var(--wui-brand-ink);
  color: var(--wui-white);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -150px;
  top: -130px;
  border: 110px solid var(--wui-alpha-primary-12);
  transform: rotate(25deg);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__inner {
  position: relative;
  z-index: var(--wui-z-local);
  width: min(1440px, calc(100% - 48px));
  min-height: 670px;
  margin: auto;
  padding-top: var(--wui-topbar-h);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--wui-space-18);
  align-items: center;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__eyebrow {
  margin-bottom: var(--wui-space-5);
  color: var(--wui-gray-400);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-heavy);
  letter-spacing: 1.8px;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero h1 {
  max-width: 650px;
  margin: 0 0 var(--wui-space-6);
  font-size: var(--wui-font-display-lg);
  line-height: var(--wui-line-none);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero p {
  max-width: 620px;
  margin: 0 0 var(--wui-space-9);
  color: var(--wui-gray-100);
  font-size: var(--wui-font-xl);
  line-height: var(--wui-line-loose);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__actions, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__trust {
  display: flex;
  flex-wrap: wrap;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__actions {
  gap: var(--wui-space-3);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__trust {
  gap: var(--wui-space-7);
  margin-top: var(--wui-space-10);
  color: var(--wui-gray-400);
  font-size: var(--wui-font-xs);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__trust span::before {
  content: "✓";
  margin-right: var(--wui-space-2);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__hero-preview {
  min-height: 420px;
  background: var(--wui-subtle-bg);
  color: var(--wui-text-primary);
  border: var(--wui-border-width) solid var(--wui-alpha-white-25);
  box-shadow: var(--wui-shadow-landing-hero);
  transform: perspective(1300px) rotateY(-5deg);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__top {
  height: var(--wui-control-3xl);
  padding: 0 var(--wui-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--wui-bg-card);
  border-bottom: var(--wui-line);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__dots {
  display: flex;
  gap: var(--wui-space-2);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__dots i {
  width: 7px;
  height: 7px;
  display: block;
  background: var(--wui-gray-300);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__brand {
  color: var(--wui-text-primary);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-heavy);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__body {
  display: grid;
  grid-template-columns: 105px 1fr;
  min-height: 362px;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__side {
  padding: var(--wui-space-4) var(--wui-space-3);
  background: var(--wui-bg-card);
  border-right: var(--wui-line);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__side span {
  display: block;
  height: 35px;
  margin-bottom: var(--wui-space-2);
  background: var(--wui-subtle-bg);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__side span:first-child {
  background: var(--wui-action-primary-soft);
  border: var(--wui-border-width) solid var(--wui-action-primary);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__content {
  padding: var(--wui-space-5);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__title, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__chart {
  background: var(--wui-bg-card);
  border: var(--wui-line);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__title {
  height: 55px;
  margin-bottom: var(--wui-space-4);
  padding: var(--wui-space-4);
  font-weight: var(--wui-weight-heavy);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wui-space-3);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__preview-card {
  height: 82px;
  padding: var(--wui-space-3);
  box-shadow: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__preview-card b {
  display: block;
  margin-top: var(--wui-space-2);
  font-size: var(--wui-font-2xl);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__chart {
  position: relative;
  height: 165px;
  margin-top: var(--wui-space-3);
  overflow: hidden;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero-panel__chart::before {
  content: "";
  position: absolute;
  left: 35px;
  right: 18px;
  bottom: 35px;
  height: 90px;
  background: linear-gradient(160deg,transparent 0 18%,var(--wui-action-primary) 19% 21%,transparent 22% 36%,var(--wui-action-primary) 37% 39%,transparent 40% 54%,var(--wui-action-primary) 55% 57%,transparent 58% 73%,var(--wui-action-primary) 74% 76%,transparent 77%);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section {
  padding: var(--wui-space-23) 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section--soft {
  background: var(--wui-page-bg);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section__inner {
  width: min(1240px, calc(100% - 48px));
  margin: auto;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section__head {
  max-width: 820px;
  margin: 0 auto var(--wui-space-13);
  text-align: center;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section__head small {
  color: var(--wui-link-text);
  font-weight: var(--wui-weight-heavy);
  letter-spacing: 1.2px;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section__head h2, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-split h2 {
  color: var(--wui-text-primary);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section__head h2 {
  margin: var(--wui-space-3) 0 var(--wui-space-4);
  font-size: var(--wui-font-display-md);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section__head p, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-split p {
  color: var(--wui-text-tertiary);
  line-height: var(--wui-line-loose);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--wui-line);
  border-left: var(--wui-line);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__feature {
  min-height: 230px;
  padding: var(--wui-space-9);
  border-width: 0 1px 1px 0;
  box-shadow: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-feature-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--wui-space-6);
  display: grid;
  place-items: center;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-feature-icon .wui-icon {
  width: 24px;
  height: 24px;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-feature-card h3 {
  margin: 0 0 var(--wui-space-3);
  font-size: var(--wui-font-xl);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-feature-card p {
  margin: 0;
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-md);
  line-height: var(--wui-line-relaxed);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wui-space-18);
  align-items: center;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-split h2 {
  margin: 0 0 var(--wui-space-5);
  font-size: var(--wui-font-display-md);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__check-list {
  margin-top: var(--wui-space-7);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__check-list .wui-list-item {
  justify-content: flex-start;
  gap: var(--wui-space-3);
  min-height: 52px;
  padding: var(--wui-space-3) var(--wui-space-4);
  font-size: var(--wui-font-md);
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__check-list .wui-list-item::before {
  content: "✓";
  flex: 0 0 18px;
  width: 18px;
  margin: 0;
  color: var(--wui-link-text);
  font-size: var(--wui-font-lg);
  line-height: var(--wui-line-none);
  text-align: center;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__panel {
  padding: var(--wui-space-9);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wui-space-3);
  background: var(--wui-brand-ink);
  color: var(--wui-white);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__stat {
  padding: var(--wui-space-6);
  background: var(--wui-alpha-white-06);
  color: var(--wui-white);
  border-color: var(--wui-alpha-white-11);
  box-shadow: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__stat strong {
  display: block;
  margin-bottom: var(--wui-space-2);
  font-size: var(--wui-font-display-sm);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__stat small, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__panel p {
  color: var(--wui-gray-400);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-cta {
  padding: var(--wui-space-15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wui-space-8);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-cta h2 {
  margin: 0 0 var(--wui-space-2);
  font-size: var(--wui-font-display-sm);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-cta p {
  margin: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer {
  padding: var(--wui-space-14) 0 var(--wui-space-8);
  background: var(--wui-brand-ink);
  color: var(--wui-gray-400);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer__inner {
  width: min(1240px, calc(100% - 48px));
  margin: auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--wui-space-11);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer__inner > div:first-child p {
  margin-top: var(--wui-space-5);
  line-height: var(--wui-line-loose);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer h3 {
  margin: 0 0 var(--wui-space-5);
  color: var(--wui-white);
  font-size: var(--wui-font-md);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer__inner > div:not(:first-child) a {
  min-height: 32px;
  display: flex;
  align-items: center;
  margin: var(--wui-space-1) 0;
  color: var(--wui-gray-400);
  text-decoration: none;
  font-size: var(--wui-font-sm);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer__bottom {
  width: min(1240px, calc(100% - 48px));
  margin: var(--wui-space-9) auto 0;
  padding-top: var(--wui-space-6);
  border-top: var(--wui-border-width) solid var(--wui-alpha-white-10);
  font-size: var(--wui-font-xs);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-nav {
  display: block;
  width: 300px;
  padding: var(--wui-space-30) var(--wui-space-10) var(--wui-space-8);
  overflow: auto;
  background: var(--wui-raised-bg);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-nav::before {
  content: "WORKAIBOX";
  position: absolute;
  top: 46px;
  left: 40px;
  color: var(--wui-text-primary);
  font-size: var(--wui-font-xl);
  font-weight: var(--wui-weight-heavy);
  letter-spacing: 1.4px;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-nav a {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: var(--wui-space-3) var(--wui-space-4);
  color: var(--wui-text-primary);
  border: var(--wui-line);
  border-bottom: 0;
  background: var(--wui-raised-bg);
  font-size: var(--wui-font-md);
  font-weight: var(--wui-weight-heavy);
  text-decoration: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-nav a:last-child {
  border-bottom: var(--wui-line);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-nav a:hover, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-nav a:focus-visible, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-nav a.is-active {
  color: var(--wui-text-primary);
  background: var(--wui-action-primary-soft);
  outline: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing.show-mobile-menu {
  overflow-x: hidden;
}

@media (max-width: 1180px) {
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-header__inner {
    position: relative;
    grid-template-columns: var(--wui-topbar-h) minmax(0, 1fr) var(--wui-topbar-h);
    width: min(100% - 28px, 1240px);
    gap: var(--wui-space-3);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-toggle {
    display: block;
    grid-column: 1;
    justify-self: start;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand {
    grid-column: 2;
    justify-self: center;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-mobile-user {
    display: block;
    grid-column: 3;
    justify-self: end;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-nav, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-actions {
    display: none;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__inner {
    grid-template-columns: 1fr;
    padding-block: var(--wui-space-18);
    padding-top: calc(var(--wui-topbar-h) + var(--wui-space-18));
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__hero-preview {
    transform: none;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .landing, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-header__inner {
    height: var(--wui-topbar-h);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand__logo {
    width: 178px;
    max-height: calc(var(--wui-topbar-h) - 16px);
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-header__inner, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__inner, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section__inner, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer__inner, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer__bottom {
    width: min(100% - 28px, 1240px);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero {
    min-height: auto;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__inner {
    min-height: auto;
    padding-block: var(--wui-space-16);
    padding-top: calc(var(--wui-topbar-h) + var(--wui-space-16));
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero h1 {
    font-size: var(--wui-font-display-md);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero p {
    font-size: var(--wui-font-lg);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-hero__trust {
    display: grid;
    gap: var(--wui-space-3);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__hero-preview {
    display: none;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-feature-grid, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-split, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .wui-landing__panel {
    grid-template-columns: 1fr;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-split {
    gap: var(--wui-space-9);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section {
    padding: var(--wui-space-16) 0;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-section__head h2, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-split h2 {
    font-size: var(--wui-font-display-sm);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-cta {
    display: block;
    padding: var(--wui-space-10);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-cta .wui-btn {
    margin-top: var(--wui-space-6);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-footer__inner > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-brand__logo {
    width: 148px;
    max-height: calc(var(--wui-topbar-h) - 18px);
  }
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--wui-z-toast);
  pointer-events: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__panel {
  pointer-events: auto;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher {
  min-width: 58px;
  height: var(--wui-control-3xl);
  padding: 0 var(--wui-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wui-space-3);
  border: 1px solid var(--wui-brand-cyan-strong);
  border-radius: var(--wui-radius-round);
  background: var(--wui-brand-cyan);
  color: var(--wui-brand-ink);
  box-shadow: var(--wui-floating-shadow);
  font: inherit;
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-heavy);
  cursor: pointer;
  transition: transform var(--wui-motion-normal) var(--wui-ease-standard), background-color var(--wui-motion-normal) var(--wui-ease-standard), box-shadow var(--wui-motion-normal) var(--wui-ease-standard);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher:hover, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher:focus-visible {
  background: var(--wui-brand-cyan-strong);
  transform: translateY(-2px);
  box-shadow: var(--wui-floating-shadow-hover);
  outline: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher .wui-icon {
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher .index-guest-chat__launcher-close {
  display: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat.is-open .index-guest-chat__launcher-chat {
  display: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat.is-open .index-guest-chat__launcher .index-guest-chat__launcher-close {
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat.is-open .index-guest-chat__launcher-label {
  display: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat.is-open .index-guest-chat__launcher {
  width: 58px;
  padding: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(390px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wui-bg-card);
  border: var(--wui-line);
  box-shadow: var(--wui-overlay-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.985);
  transform-origin: right bottom;
  transition: opacity var(--wui-motion-normal) var(--wui-ease-standard), transform var(--wui-motion-normal) var(--wui-ease-standard), visibility var(--wui-motion-normal) var(--wui-ease-standard);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat.is-open .index-guest-chat__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__header {
  min-height: 68px;
  padding: var(--wui-space-3) var(--wui-space-3) var(--wui-space-3) var(--wui-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  flex: 0 0 auto;
  background: var(--wui-brand-ink);
  color: var(--wui-white);
  border-bottom: 3px solid var(--wui-brand-cyan);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--wui-space-3);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__identity > div {
  min-width: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__identity strong, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__identity small {
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__identity strong {
  font-size: var(--wui-font-lg);
  line-height: var(--wui-line-heading);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__identity small {
  margin-top: var(--wui-space-1);
  color: var(--wui-gray-300);
  font-size: var(--wui-font-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__brand-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  background: var(--wui-brand-cyan);
  border-radius: var(--wui-radius-round);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__brand-icon .wui-icon {
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__close .wui-icon {
  filter: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__close:hover, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__close:focus-visible {
  background: var(--wui-alpha-white-10);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__body {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__start, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__conversation {
  width: 100%;
  min-height: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__start {
  padding: var(--wui-space-7) var(--wui-space-6) var(--wui-space-6);
  overflow: auto;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__welcome-icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--wui-space-5);
  display: grid;
  place-items: center;
  background: var(--wui-action-primary-soft);
  border: 1px solid color-mix(in srgb, var(--wui-brand-cyan) 38%, var(--wui-line-color));
  border-radius: var(--wui-radius-round);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__welcome-icon .wui-icon {
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__start h2 {
  margin: 0 0 var(--wui-space-2);
  color: var(--wui-text-primary);
  font-size: var(--wui-font-2xl);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__start > p {
  margin: 0 0 var(--wui-space-6);
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-sm);
  line-height: var(--wui-line-relaxed);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__start-form {
  display: grid;
  gap: var(--wui-space-4);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__field {
  display: grid;
  gap: var(--wui-space-2);
  color: var(--wui-text-secondary);
  font-size: var(--wui-font-sm);
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__field small {
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-regular);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__field .wui-input {
  width: 100%;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__form-error {
  min-height: 16px;
  margin: calc(-1 * var(--wui-space-1)) 0 0;
  color: var(--wui-palette-danger);
  font-size: var(--wui-font-xs);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__start-button {
  width: 100%;
  min-height: var(--wui-control-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wui-space-2);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__start-button .wui-icon, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__send .wui-icon {
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__conversation {
  display: flex;
  flex-direction: column;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__conversation[hidden] {
  display: none;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__guest-row {
  min-height: 54px;
  padding: var(--wui-space-2) var(--wui-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-space-3);
  flex: 0 0 auto;
  background: var(--wui-subtle-bg);
  border-bottom: var(--wui-line);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__guest-row > div {
  min-width: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__guest-row strong, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__guest-label {
  display: block;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__guest-row strong {
  max-width: 210px;
  color: var(--wui-text-primary);
  font-size: var(--wui-font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__guest-label {
  margin-bottom: var(--wui-space-1);
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-xs);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__restart {
  padding: var(--wui-space-1) 0;
  border: 0;
  background: transparent;
  color: var(--wui-link-text);
  font: inherit;
  font-size: var(--wui-font-xs);
  font-weight: var(--wui-weight-bold);
  cursor: pointer;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__restart:hover, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__restart:focus-visible {
  text-decoration: underline;
  outline: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__messages {
  min-height: 0;
  padding: var(--wui-space-5) var(--wui-space-4);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--wui-space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--wui-page-bg);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__message {
  max-width: 82%;
  font-size: var(--wui-font-sm);
  line-height: var(--wui-line-normal);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__message p {
  margin: 0;
  padding: var(--wui-space-3) var(--wui-space-3);
  border: var(--wui-line);
  background: var(--wui-bg-card);
  color: var(--wui-text-primary);
  overflow-wrap: anywhere;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__message span {
  display: block;
  margin-top: var(--wui-space-1);
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-xs);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__message--outgoing {
  align-self: flex-end;
  text-align: right;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__message--outgoing p {
  background: var(--wui-action-primary-soft);
  border-color: color-mix(in srgb, var(--wui-brand-cyan) 45%, var(--wui-line-color));
  text-align: left;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__message--incoming {
  align-self: flex-start;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__composer {
  min-height: var(--wui-control-3xl);
  padding: var(--wui-space-2) var(--wui-space-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: var(--wui-space-2);
  align-items: end;
  flex: 0 0 auto;
  background: var(--wui-bg-card);
  border-top: var(--wui-line);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__composer-input {
  min-height: var(--wui-control-md);
  display: flex;
  align-items: center;
  border: var(--wui-line);
  background: var(--wui-input-bg, var(--wui-bg-card));
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__composer-input:focus-within {
  border-color: var(--wui-control-border-focus);
  box-shadow: var(--wui-shadow-control-focus);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__composer textarea {
  width: 100%;
  max-height: 112px;
  min-height: var(--wui-control-sm);
  padding: var(--wui-space-3) var(--wui-space-3);
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--wui-text-primary);
  font: inherit;
  font-size: var(--wui-font-sm);
  line-height: var(--wui-line-normal);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__composer textarea::placeholder {
  color: var(--wui-text-tertiary);
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__send {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wui-brand-cyan-strong);
  background: var(--wui-brand-cyan);
  cursor: pointer;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__send:hover, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__send:focus-visible {
  background: var(--wui-brand-cyan-strong);
  outline: 0;
}

:where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__composer-note {
  padding: 0 var(--wui-space-3) var(--wui-space-2);
  flex: 0 0 auto;
  background: var(--wui-bg-card);
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-2xs);
  line-height: var(--wui-line-compact);
}

@media (max-width: 540px) {
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat {
    right: 12px;
    bottom: 12px;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher {
    width: 56px;
    min-width: 56px;
    height: var(--wui-control-2xl);
    padding: 0;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher-label {
    display: none;
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__panel {
    bottom: 68px;
    width: calc(100vw - 24px);
    height: min(620px, calc(100dvh - 100px));
  }
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__start {
    padding: var(--wui-space-6) var(--wui-space-5) var(--wui-space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__launcher, :where(html[data-style~="landing"]) body[data-page="index"].wui-landing .index-guest-chat__panel {
    transition: none;
  }
}

/* Signed-in landing variant; shared header, menu and mobile controls. */
:where(html[data-style~="landing"]) body[data-page="index"][data-landing-state="member"] .index-profile__button {
  display:flex;
  align-items:center;
  gap:var(--wui-space-3);
  height:var(--wui-control-lg);
  padding-inline:var(--wui-space-3);
}

:where(html[data-style~="landing"]) body[data-page="index"][data-landing-state="member"] .index-profile__text {
  display:grid;
  text-align:start;
  line-height:var(--wui-line-normal);
}

:where(html[data-style~="landing"]) body[data-page="index"][data-landing-state="member"] .index-profile__text small {
  font-size:var(--wui-font-xs);
  font-weight:var(--wui-weight-regular);
}

:where(html[data-style~="landing"]) body[data-page="index"][data-landing-state="member"] .index-avatar {
  display:grid;
  place-items:center;
  width:var(--wui-control-sm);
  height:var(--wui-control-sm);
  background:var(--wui-action-primary-soft);
  color:var(--wui-text-primary);
}

:where(html[data-style~="landing"]) body[data-page="index"][data-landing-state="member"] .landing.is-top .index-profile__button {
  background:transparent;
  color:var(--wui-white);
  border-color:var(--wui-alpha-white-35);
}

:where(html[data-style~="landing"]) body[data-page="index"][data-landing-state="member"] .landing.is-top .index-profile__button:hover {
  background:var(--wui-alpha-white-10);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 20 — Bileşen kataloğu
   ========================================================================== */
/* WUI SECTION: pages/catalog */
:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--wui-space-5);
  align-items: start;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-nav {
  position: sticky;
  top: calc(var(--wui-topbar-h) + var(--wui-space-4));
  display: grid;
  max-height: calc(100dvh - var(--wui-topbar-h) - var(--wui-space-10));
  overflow: auto;
  border: var(--wui-line);
  background: var(--wui-bg-card);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-nav a {
  display: flex;
  align-items: center;
  min-height: var(--wui-control-md);
  padding: var(--wui-space-2) var(--wui-space-3);
  color: var(--wui-text-primary);
  border-bottom: var(--wui-line);
  text-decoration: none;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-nav a:hover {
  background: var(--wui-state-hover-surface);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-content {
  min-width: 0;
  display: grid;
  gap: var(--wui-space-6);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-section {
  min-width: 0;
  scroll-margin-top: calc(var(--wui-topbar-h) + var(--wui-space-4));
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-section > header {
  display: flex;
  align-items: baseline;
  gap: var(--wui-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--wui-space-3);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-section h2 {
  margin: 0;
  font-size: var(--wui-font-xl);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-source {
  color: var(--wui-text-tertiary);
  font-size: var(--wui-font-sm);
  overflow-wrap: anywhere;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wui-space-4);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-example {
  min-width: 0;
  border: var(--wui-line);
  background: var(--wui-bg-card);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-example > h3 {
  margin: 0;
  padding: var(--wui-space-3) var(--wui-space-4);
  font-size: var(--wui-font-md);
  border-bottom: var(--wui-line);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-demo {
  padding: var(--wui-space-4);
  min-width: 0;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-demo :where(p, li, small, code),
:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-example :where(p, li, small, code) {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-row {
  display: flex;
  gap: var(--wui-space-3);
  align-items: center;
  flex-wrap: wrap;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-stack {
  display: grid;
  gap: var(--wui-space-3);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-example details {
  border-top: var(--wui-line);
  padding: var(--wui-space-3) var(--wui-space-4);
}

:where(html[data-style~="catalog"]) body[data-page="components"] summary {
  cursor: pointer;
  color: var(--wui-link-text);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-code {
  margin: var(--wui-space-3) 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--wui-font-sm);
  color: var(--wui-text-secondary);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-wide {
  grid-column: 1 / -1;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch {
  height: 64px;
  border: var(--wui-line);
  margin-bottom: var(--wui-space-2);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--wui-space-3);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--wui-space-2);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-icon-item {
  border: var(--wui-line);
  padding: var(--wui-space-3);
  display: grid;
  justify-items: center;
  gap: var(--wui-space-2);
  overflow-wrap: anywhere;
  text-align: center;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-frame {
  width: 100%;
  height: 720px;
  display: block;
  border: var(--wui-line);
  background: var(--wui-page-bg);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-frame-wrap {
  overflow-x: auto;
  margin-top: var(--wui-space-3);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-frame.is-mobile {
  width: 390px;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-drawer {
  width: var(--wui-drawer-width);
  padding: var(--wui-space-4);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-menu {
  position: fixed;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-user-menu-preview.wui-user-menu {
  position:relative;
  inset:auto;
  width:min(var(--wui-menu-width),100%);
  max-height:none;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:none;
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-note {
  margin: 0 0 var(--wui-space-3);
  color: var(--wui-text-secondary);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch[data-token="primary"] {
  background: var(--wui-primary);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch[data-token="secondary"] {
  background: var(--wui-secondary);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch[data-token="success"] {
  background: var(--wui-success);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch[data-token="warning"] {
  background: var(--wui-warning);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch[data-token="danger"] {
  background: var(--wui-danger);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch[data-token="bg-page"] {
  background: var(--wui-bg-page);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch[data-token="bg-card"] {
  background: var(--wui-bg-card);
}

:where(html[data-style~="catalog"]) body[data-page="components"] .catalog-swatch[data-token="bg-input"] {
  background: var(--wui-bg-input);
}

@media (max-width: 1180px) {
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-layout {
    width:100%;
    min-width:0;
    grid-template-columns: minmax(0, 1fr);
  }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-layout {
    position:relative;
  }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-layout::after {
    content:"›";
    position:absolute;
    top:var(--wui-space-2);
    right:var(--wui-space-2);
    z-index:var(--wui-z-local);
    display:grid;
    place-items:center;
    width:var(--wui-control-sm);
    height:var(--wui-control-sm);
    border:var(--wui-line);
    border-radius:var(--wui-radius-round);
    background:var(--wui-bg-card);
    color:var(--wui-text-secondary);
    pointer-events:none
  }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-nav {
    position: static;
    display: flex;
    width:100%;
    min-width:0;
    max-height: none;
    overflow-x: auto;
    overscroll-behavior-inline:contain;
  }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-nav a {
    flex:0 0 auto;
    white-space:nowrap;
  }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-content,
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-section,
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-grid,
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-example,
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-demo {
    width:100%;
    max-width:100%;
    min-width:0;
  }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-demo > .wui-table-wrap,
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-demo > .catalog-frame-wrap {
    max-width:100%;
    overflow-x:auto;
  }
}
@media (max-width: 540px) {
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-demo { padding:var(--wui-space-3); }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-palette,
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-icons { grid-template-columns:minmax(0,1fr); }
  :where(html[data-style~="catalog"]) body[data-page="components"] .catalog-frame.is-mobile { width:min(390px,100%); }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 21 — Tahsilat ve ödeme makbuzu
   ========================================================================== */
/* WUI SECTION: pages/payment-receipt */
:where(html[data-style~="payment-receipt"]) .payment-receipt-page {
  --receipt-bg:var(--wui-gray-100);
  --receipt-panel:var(--wui-white);
  --receipt-text:var(--wui-gray-900);
  --receipt-muted:var(--wui-gray-600);
  --receipt-line:var(--wui-gray-300);
  --receipt-line-strong:var(--wui-gray-400);
  --receipt-accent:var(--wui-brand-cyan,var(--wui-brand-cyan));
  --receipt-accent-soft:var(--wui-brand-cyan-soft);
  min-width:0;
}

:where(html[data-style~="payment-receipt"]) .receipt-page-header {
  margin-bottom:var(--wui-space-3)
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar {
  display:grid;
  grid-template-columns:minmax(190px,1fr) auto auto;
  align-items:end;
  gap:var(--wui-space-3);
  margin-bottom:var(--wui-space-3);
  padding:var(--wui-space-3) var(--wui-space-4);
  border:var(--wui-line);
  border-radius:var(--wui-radius-ui);
  background:var(--wui-surface);
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-copy {
  display:grid;
  gap:var(--wui-space-1);
  align-self:center
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-copy strong {
  font-size:var(--wui-font-md)
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-copy span {
  font-size:var(--wui-font-xs);
  color:var(--wui-muted)
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-fields {
  display:flex;
  gap:var(--wui-space-2);
  flex-wrap:wrap
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-field {
  display:grid;
  gap:var(--wui-space-1);
  font-size:var(--wui-font-xs);
  color:var(--wui-muted);
  font-weight:var(--wui-weight-bold)
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-field select {
  min-width:165px;
  height:var(--wui-control-sm);
  border:var(--wui-line);
  border-radius:var(--wui-radius-ui);
  background:var(--wui-surface);
  color:var(--wui-text);
  padding:0 var(--wui-space-2);
  font:inherit;
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-actions {
  display:flex;
  gap:var(--wui-space-2);
  flex-wrap:wrap;
  justify-content:flex-end
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-action-group {
  display:grid;
  gap:var(--wui-space-1);
  align-content:start
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-group-label {
  color:var(--wui-text-tertiary);
  font-size:var(--wui-font-xs);
  font-weight:var(--wui-weight-bold)
}

:where(html[data-style~="payment-receipt"]) .receipt-toolbar-action-buttons {
  display:flex;
  gap:var(--wui-space-2);
  flex-wrap:wrap
}

:where(html[data-style~="payment-receipt"]) .wui-preview-mode {
  display:flex;
  align-items:center;
  gap:var(--wui-space-2);
  flex-wrap:wrap;
  padding:var(--wui-space-1);
  border:var(--wui-line);
  background:var(--wui-subtle-bg)
}

:where(html[data-style~="payment-receipt"]) .receipt-workspace {
  padding:var(--wui-space-6) var(--wui-space-4) var(--wui-space-12);
  overflow:auto;
  border-radius:var(--wui-radius-ui);
  background:var(--wui-surface-alt)
}

:where(html[data-style~="payment-receipt"]) .receipt-page-shell {
  width:max-content;
  min-width:100%;
  display:flex;
  justify-content:center
}

@media screen {
  :where(html[data-style~="payment-receipt"]) .receipt-sheet {
    flex:0 0 210mm;
  }
  :where(html[data-style~="payment-receipt"]) .payment-receipt-page[data-preview-fit="fit"] .receipt-sheet {
    zoom:var(--wui-preview-scale,1);
  }
}

:where(html[data-style~="payment-receipt"]) .receipt-sheet {
  width:210mm;
  height:148.5mm;
  background:var(--wui-white);
  color:var(--wui-gray-900);
  border:1px solid var(--wui-gray-300);
  box-shadow:var(--wui-raised-shadow);
  padding:5mm 5mm 4mm;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

:where(html[data-style~="payment-receipt"]) .receipt-sheet * {
  box-sizing:border-box;
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact
}

:where(html[data-style~="payment-receipt"]) .receipt-header {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5mm;
  align-items:start;
  padding-bottom:3mm;
  border-bottom:1px solid var(--wui-gray-300)
}

:where(html[data-style~="payment-receipt"]) .receipt-company-logo {
  display:flex;
  align-items:center;
  font-weight:var(--wui-weight-heavy);
  font-size:var(--wui-font-print-title);
  letter-spacing:.8px
}

:where(html[data-style~="payment-receipt"]) .receipt-company-logo::before {
  content:"";
  width:8mm;
  height:8mm;
  border-radius:var(--wui-radius-ui);
  background:var(--wui-brand-cyan);
  margin-right:2.4mm
}

:where(html[data-style~="payment-receipt"]) .receipt-company-name {
  font-size:var(--wui-font-print-xl);
  font-weight:var(--wui-weight-heavy);
  margin-top:1.5mm
}

:where(html[data-style~="payment-receipt"]) .receipt-company-lines {
  font-size:var(--wui-font-print-sm);
  line-height:var(--wui-line-normal);
  color:var(--wui-gray-600);
  margin-top:1mm
}

:where(html[data-style~="payment-receipt"]) .receipt-title {
  text-align:center;
  padding-top:1mm
}

:where(html[data-style~="payment-receipt"]) .receipt-title h2 {
  margin:0;
  font-size:var(--wui-font-print-title);
  letter-spacing:.6px
}

:where(html[data-style~="payment-receipt"]) .receipt-sub {
  margin-top:2mm;
  font-size:var(--wui-font-print-sm);
  color:var(--wui-gray-600)
}

:where(html[data-style~="payment-receipt"]) .receipt-badge-row {
  display:flex;
  justify-content:center;
  gap:1mm;
  flex-wrap:wrap
}

:where(html[data-style~="payment-receipt"]) .copy-badge {
  display:inline-block;
  margin-top:2mm;
  padding:1mm 2.2mm;
  border-radius:var(--wui-radius-round);
  background:var(--wui-brand-cyan-soft);
  color:var(--wui-brand-cyan-strong);
  font-size:var(--wui-font-print-xs);
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="payment-receipt"]) .cancelled-badge {
  background:var(--wui-danger-soft);
  color:var(--wui-danger-strong)
}

:where(html[data-style~="payment-receipt"]) .receipt-ref {
  text-align:right
}

:where(html[data-style~="payment-receipt"]) .receipt-ref-label {
  font-size:var(--wui-font-print-xs);
  color:var(--wui-gray-600);
  text-transform:uppercase;
  letter-spacing:.45px
}

:where(html[data-style~="payment-receipt"]) .receipt-ref-label-spaced {
  margin-top:2mm
}

:where(html[data-style~="payment-receipt"]) .receipt-head-control {
  width:100%;
  margin-top:1mm;
  border:0;
  border-bottom:1px solid var(--wui-gray-300);
  background:transparent;
  text-align:right;
  font-weight:var(--wui-weight-heavy);
  font-size:var(--wui-font-xs);
  color:var(--wui-gray-900);
  outline:none;
  padding:1mm 0
}

:where(html[data-style~="payment-receipt"]) .receipt-head-control:focus {
  border-color:var(--wui-brand-cyan)
}

:where(html[data-style~="payment-receipt"]) .receipt-info-grid {
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:6mm;
  margin-top:3mm
}

:where(html[data-style~="payment-receipt"]) .receipt-block-title {
  font-size:var(--wui-font-print-sm);
  font-weight:var(--wui-weight-heavy);
  letter-spacing:.65px;
  color:var(--wui-gray-600);
  text-transform:uppercase;
  padding-bottom:1.4mm;
  border-bottom:1px solid var(--wui-gray-300)
}

:where(html[data-style~="payment-receipt"]) .receipt-form-lines {
  margin-top:1.2mm
}

:where(html[data-style~="payment-receipt"]) .receipt-form-row {
  display:grid;
  grid-template-columns:31mm 1fr;
  align-items:center;
  min-height:6.7mm;
  border-bottom:1px solid var(--wui-gray-200);
  font-size:var(--wui-font-print-md)
}

:where(html[data-style~="payment-receipt"]) .receipt-form-row>span:first-child {
  color:var(--wui-gray-600);
  font-weight:var(--wui-weight-bold)
}

:where(html[data-style~="payment-receipt"]) .receipt-control {
  width:100%;
  height:6mm;
  border:0;
  background:transparent;
  color:var(--wui-gray-900);
  font-size:var(--wui-font-print-lg);
  font-weight:var(--wui-weight-heavy);
  outline:none;
  padding:0
}

:where(html[data-style~="payment-receipt"]) .receipt-control:focus, :where(html[data-style~="payment-receipt"]) .receipt-control:hover {
  background:var(--wui-gray-50);
  box-shadow:none;
  border-bottom:1px solid var(--wui-brand-cyan)
}

:where(html[data-style~="payment-receipt"]) .receipt-control:disabled, :where(html[data-style~="payment-receipt"]) .receipt-head-control:disabled {
  opacity:1;
  color:var(--wui-gray-900);
  -webkit-text-fill-color:var(--wui-gray-900);
  cursor:default
}

:where(html[data-style~="payment-receipt"]) .receipt-sheet.is-view select.receipt-control {
  appearance:none;
  -webkit-appearance:none;
  background-image:none
}

:where(html[data-style~="payment-receipt"]) .receipt-sheet.is-view .receipt-control:hover, :where(html[data-style~="payment-receipt"]) .receipt-sheet.is-view .receipt-control:focus {
  background:transparent;
  box-shadow:none
}

:where(html[data-style~="payment-receipt"]) .receipt-amount-card {
  margin-top:2mm;
  border:1px solid var(--wui-gray-400);
  border-radius:var(--wui-radius-ui);
  padding:3mm 3.4mm;
  background:var(--wui-gray-50)
}

:where(html[data-style~="payment-receipt"]) .receipt-amount-key {
  font-size:var(--wui-font-print-sm);
  color:var(--wui-gray-600);
  font-weight:var(--wui-weight-heavy);
  text-transform:uppercase;
  letter-spacing:.45px
}

:where(html[data-style~="payment-receipt"]) .receipt-amount-wrap {
  display:flex;
  align-items:baseline;
  gap:1.2mm;
  margin-top:1.4mm
}

:where(html[data-style~="payment-receipt"]) .receipt-amount-wrap input {
  width:100%;
  border:0;
  background:transparent;
  color:var(--wui-gray-950);
  font-size:var(--wui-font-title-sm);
  font-weight:var(--wui-weight-heavy);
  text-align:right;
  outline:none;
  letter-spacing:-.3px
}

:where(html[data-style~="payment-receipt"]) .receipt-amount-wrap input:disabled {
  opacity:1;
  color:var(--wui-gray-950);
  -webkit-text-fill-color:var(--wui-gray-950)
}

:where(html[data-style~="payment-receipt"]) .receipt-amount-wrap span {
  font-size:var(--wui-font-print-xl);
  font-weight:var(--wui-weight-heavy);
  color:var(--wui-gray-700)
}

:where(html[data-style~="payment-receipt"]) .receipt-amount-words {
  margin-top:1.6mm;
  padding-top:1.6mm;
  border-top:1px dashed var(--wui-gray-300);
  font-size:var(--wui-font-print-xs);
  line-height:var(--wui-line-compact);
  color:var(--wui-gray-600);
  min-height:7mm
}

:where(html[data-style~="payment-receipt"]) .receipt-bottom-grid {
  display:grid;
  grid-template-columns:1.45fr .55fr;
  gap:6mm;
  margin-top:3mm;
  min-height:0;
  flex:1 1 auto
}

:where(html[data-style~="payment-receipt"]) .receipt-note-box {
  min-width:0;
  display:flex;
  flex-direction:column
}

:where(html[data-style~="payment-receipt"]) .receipt-description {
  width:100%;
  height:23mm;
  min-height:23mm;
  max-height:23mm;
  border:0;
  border-bottom:1px solid var(--wui-gray-300);
  background:transparent;
  padding:2mm 0;
  resize:none;
  outline:none;
  font-size:var(--wui-font-print-md);
  line-height:var(--wui-line-normal);
  color:var(--wui-gray-900)
}

:where(html[data-style~="payment-receipt"]) .receipt-description:focus {
  border-color:var(--wui-brand-cyan)
}

:where(html[data-style~="payment-receipt"]) .receipt-signatures {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5mm;
  margin-top:auto;
  padding-top:3mm
}

:where(html[data-style~="payment-receipt"]) .receipt-signature {
  text-align:center;
  font-size:var(--wui-font-print-sm);
  color:var(--wui-gray-600)
}

:where(html[data-style~="payment-receipt"]) .receipt-signature strong {
  display:block;
  color:var(--wui-gray-900);
  font-size:var(--wui-font-print-md);
  margin-bottom:7mm
}

:where(html[data-style~="payment-receipt"]) .receipt-signature-line {
  border-top:1px solid var(--wui-gray-400);
  padding-top:1mm
}

:where(html[data-style~="payment-receipt"]) .receipt-mini-summary {
  border:1px solid var(--wui-gray-300);
  border-radius:var(--wui-radius-ui);
  overflow:hidden;
  align-self:start
}

:where(html[data-style~="payment-receipt"]) .receipt-summary-head {
  padding:2mm 2.5mm;
  background:var(--wui-gray-100);
  font-size:var(--wui-font-print-sm);
  font-weight:var(--wui-weight-heavy);
  color:var(--wui-gray-600);
  text-transform:uppercase
}

:where(html[data-style~="payment-receipt"]) .receipt-sum-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3mm;
  padding:2mm 2.5mm;
  border-top:1px solid var(--wui-gray-200);
  font-size:var(--wui-font-print-sm)
}

:where(html[data-style~="payment-receipt"]) .receipt-sum-row span {
  color:var(--wui-gray-600)
}

:where(html[data-style~="payment-receipt"]) .receipt-sum-row strong {
  text-align:right
}

:where(html[data-style~="payment-receipt"]) .receipt-footer {
  display:flex;
  justify-content:space-between;
  gap:4mm;
  margin-top:2.4mm;
  padding-top:1.8mm;
  border-top:1px solid var(--wui-gray-200);
  font-size:var(--wui-font-print-xxs);
  color:var(--wui-gray-600)
}

:where(html[data-style~="payment-receipt"]) .receipt-print-root {
  display:none
}

:where(html[data-style~="payment-receipt"]) .print-copy-label {
  display:none
}

:where(html[data-style~="payment-receipt"]) .receipt-not-found {
  max-width:680px;
  margin:var(--wui-space-12) auto;
  padding:var(--wui-space-6);
  border:var(--wui-line);
  background:var(--wui-surface);
  text-align:center
}

:where(html[data-style~="payment-receipt"]) .receipt-not-found h2 {
  margin-top:0
}

:where(html[data-style~="payment-receipt"]) .receipt-field-error {
  outline:1px solid var(--wui-danger);
  background:var(--wui-danger-soft)
}

:where(html[data-style~="payment-receipt"]) .receipt-print-value {
  display:block;
  min-width:0;
  color:var(--wui-gray-900);
  font-size:var(--wui-font-print-md);
  font-weight:var(--wui-weight-heavy);
  line-height:var(--wui-line-compact);
  overflow-wrap:anywhere;
  white-space:normal
}

:where(html[data-style~="payment-receipt"]) .receipt-print-copy.is-long-content .receipt-company-name, :where(html[data-style~="payment-receipt"]) .receipt-print-copy.is-long-content .receipt-print-value {
  font-size:var(--wui-font-print-sm)
}

:where(html[data-style~="payment-receipt"]) .receipt-print-copy.is-long-content .receipt-description {
  font-size:var(--wui-font-print-xs);
  line-height:var(--wui-line-tight)
}

@media(max-width:820px) {
  :where(html[data-style~="payment-receipt"]) .receipt-toolbar {
    grid-template-columns:1fr;
    align-items:stretch
  }
  :where(html[data-style~="payment-receipt"]) .receipt-toolbar-fields {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    width:100%
  }
  :where(html[data-style~="payment-receipt"]) .receipt-toolbar-field select {
    width:100%;
    min-width:0
  }
  :where(html[data-style~="payment-receipt"]) .receipt-toolbar-actions {
    justify-content:flex-start
  }
  :where(html[data-style~="payment-receipt"]) .receipt-page-shell {
    width:100%;
    min-width:0;
    justify-content:center
  }
  :where(html[data-style~="payment-receipt"]) .payment-receipt-page[data-preview-fit="actual"] .receipt-page-shell {
    width:max-content;
    min-width:100%;
    justify-content:flex-start
  }
  :where(html[data-style~="payment-receipt"]) .receipt-workspace {
    padding:var(--wui-space-4) var(--wui-space-3) var(--wui-space-10)
  }
  :where(html[data-style~="payment-receipt"]) .receipt-sheet {
    margin:0
  }
}

@media print {
  @page wui-payment-receipt {
    size:A4 portrait;
    margin:0
  }
  html:where([data-style~="payment-receipt"]), :where(html[data-style~="payment-receipt"]) body {
    width:210mm;
    height:297mm;
    margin:0;
    padding:0;
    background:var(--wui-white)
  }
  :where(html[data-style~="payment-receipt"]) body .wui-header, :where(html[data-style~="payment-receipt"]) body .wui-sidebar, :where(html[data-style~="payment-receipt"]) body .receipt-page-header, :where(html[data-style~="payment-receipt"]) body .receipt-toolbar, :where(html[data-style~="payment-receipt"]) body .receipt-workspace, :where(html[data-style~="payment-receipt"]) body .screen-only {
    display:none
  }
  :where(html[data-style~="payment-receipt"]) body .wui-shell, :where(html[data-style~="payment-receipt"]) body .wui-main, :where(html[data-style~="payment-receipt"]) body .wui-page, :where(html[data-style~="payment-receipt"]) body .payment-receipt-page {
    width:210mm;
    max-width:none;
    min-height:0;
    margin:0;
    padding:0;
    background:var(--wui-white)
  }
  :where(html[data-style~="payment-receipt"]) body .wui-main {
    padding-top:0;
    margin-left:0
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root {
    display:block;
    width:210mm;
    height:297mm;
    margin:0;
    padding:0;
    overflow:hidden;
    background:var(--wui-white)
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-copy {
    width:210mm;
    height:148.5mm;
    box-sizing:border-box;
    overflow:hidden;
    background:var(--wui-white);
    position:relative
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-copy:first-child {
    border-bottom:.25mm dashed var(--wui-gray-500)
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-copy:first-child::after {
    content:"KESİM";
    position:absolute;
    right:5mm;
    bottom:1mm;
    background:var(--wui-white);
    padding:0 1.5mm;
    color:var(--wui-gray-600);
    font-size:var(--wui-font-print-xxs);
    letter-spacing:.7px;
    font-weight:var(--wui-weight-heavy)
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-copy .receipt-sheet {
    width:210mm;
    height:148.5mm;
    margin:0;
    border:0;
    box-shadow:none
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-copy .screen-copy {
    display:none
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-copy .print-copy-label {
    display:inline-block
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-copy .receipt-control, :where(html[data-style~="payment-receipt"]) .receipt-print-copy .receipt-head-control, :where(html[data-style~="payment-receipt"]) .receipt-print-copy input, :where(html[data-style~="payment-receipt"]) .receipt-print-copy select, :where(html[data-style~="payment-receipt"]) .receipt-print-copy textarea {
    pointer-events:none
  }
  html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_80"], html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_80"] body, html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_80"] body .wui-shell, html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_80"] body .wui-main, html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_80"] body .wui-page, html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_80"] body .payment-receipt-page {
    width:80mm;
    height:auto
  }
  html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_58"], html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_58"] body, html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_58"] body .wui-shell, html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_58"] body .wui-main, html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_58"] body .wui-page, html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_58"] body .payment-receipt-page {
    width:58mm;
    height:auto
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output {
    width:var(--wui-output-width);
    height:auto;
    overflow:visible
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-print-copy {
    page:thermal80;
    width:var(--wui-output-width);
    height:auto;
    border:0
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-sheet {
    width:var(--wui-output-width);
    height:auto;
    min-height:0;
    padding:3mm
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-header, :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-info-grid, :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-bottom-grid {
    grid-template-columns:1fr
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-title, :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-ref, :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-head-control {
    text-align:left
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-badge-row {
    justify-content:flex-start
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-description {
    height:auto;
    min-height:15mm
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-signatures {
    gap:2mm
  }
  :where(html[data-style~="payment-receipt"]) .receipt-print-root.is-thermal-output .receipt-print-copy::after {
    display:none
  }
  html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_58"] .receipt-print-root.is-thermal-output .receipt-print-copy {
    page:thermal58
  }

  html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_80"] body { page:thermal80; height:auto }
  html:where([data-style~="payment-receipt"])[data-output-profile="THERMAL_58"] body { page:thermal58; height:auto }
}

@media print {
  html:where([data-style~="payment-receipt"]) body {
    page: wui-payment-receipt;
  }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 22 — POS ekranı
   ========================================================================== */
/* WUI SECTION: pages/pos */
:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-footer, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-content {
  background:var(--wui-bg-card);
  border-color:var(--wui-line-color);
  color:var(--wui-text-primary)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-header-actions, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-footer-actions, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-payment-actions {
  display:flex;
  gap:var(--wui-space-2);
  flex-wrap:wrap
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-header-actions .wui-btn {
  display:inline-flex;
  align-items:center;
  gap:var(--wui-space-2)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:var(--wui-space-4);
  align-items:start
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-products-card, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-card {
  min-width:0
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-products-header {
  align-items:center
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-products-header>div:first-child {
  display:grid;
  gap:var(--wui-space-1)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-search-wrap {
  position:relative;
  width:min(var(--wui-search-max),100%)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-search-wrap .wui-icon {
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--wui-muted);
  pointer-events:none
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-search-wrap .wui-control {
  padding-left:var(--wui-space-10)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-products-body {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--wui-space-4);
  min-width:0
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-category-list {
  display:flex;
  max-width:100%;
  min-width:0;
  gap:var(--wui-space-2);
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-padding-inline:var(--wui-space-2);
  scrollbar-width:thin;
  scrollbar-color:var(--wui-line-color) var(--wui-subtle-bg);
  box-shadow:var(--wui-shadow-scroll-edge);
  padding-bottom:var(--wui-space-2)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-category-button {
  flex:0 0 auto
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-category-button:is(.active,[aria-selected="true"]) {
  background:var(--wui-state-selected-surface);
  border-color:transparent;
  color:var(--wui-state-selected-text)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid {
  display:grid;
  min-width:0;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:var(--wui-space-3)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  border:var(--wui-line);
  font:inherit;
  cursor:pointer;
  padding:0;
  overflow:hidden;
  min-height:240px
}

@media (hover: hover) and (pointer: fine) {
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product:hover {
    border-color:var(--wui-control-border-hover);
    background:var(--wui-table-row-hover-bg)
  }
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product:active {
  background:var(--wui-state-active-surface)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product:focus-visible {
  border-color:var(--wui-state-selected-border);
  outline:0;
  box-shadow:var(--wui-state-focus-ring)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-name {
  font-weight:var(--wui-weight-bold);
  line-height:var(--wui-line-compact);
  overflow-wrap:anywhere
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-code {
  font-size:var(--wui-font-sm);
  color:var(--wui-muted);
  margin-top:var(--wui-space-1)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-bottom {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:var(--wui-space-3);
  margin-top:auto;
  padding-top:var(--wui-space-3)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-price {
  font-weight:var(--wui-weight-heavy);
  color:var(--wui-link-text)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-stock {
  font-size:var(--wui-font-xs);
  color:var(--wui-muted)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-card {
  position:sticky;
  top:calc(var(--wui-topbar-h) + 16px);
  max-height:calc(100vh - var(--wui-topbar-h) - 32px);
  display:flex;
  flex-direction:column
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-card .wui-card-header>div {
  display:grid;
  gap:var(--wui-space-1)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-list {
  min-height:180px;
  overflow:auto;
  flex:1 1 auto
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-empty {
  padding:var(--wui-space-11) var(--wui-space-5);
  text-align:center;
  color:var(--wui-muted)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-empty .wui-icon {
  display:block;
  font-size:var(--wui-font-display-sm);
  margin-bottom:var(--wui-space-3)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--wui-space-3);
  padding:var(--wui-space-3) var(--wui-space-4);
  border-bottom: var(--wui-line)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-item-main {
  min-width:0
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-item-name {
  font-weight:var(--wui-weight-bold);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-item-meta {
  font-size:var(--wui-font-sm);
  color:var(--wui-muted);
  margin-top:var(--wui-space-1)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-item-side {
  display:grid;
  justify-items:end;
  gap:var(--wui-space-2)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-item-total {
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity {
  display:flex;
  align-items:center;
  border: var(--wui-line)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity button {
  width:var(--wui-control-sm);
  height:var(--wui-control-sm);
  border:0;
  background:var(--wui-surface-2);
  color:var(--wui-text);
  cursor:pointer;
  font:inherit;
  font-weight:var(--wui-weight-bold)
}

@media (hover: hover) and (pointer: fine) {
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity button:hover {
    background:var(--wui-state-hover-surface);
    color:var(--wui-primary)
  }
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity button:active {
  background:var(--wui-state-active-surface)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity button:focus-visible {
  outline:2px solid var(--wui-state-focus-color);
  outline-offset:-2px
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity span {
  min-width:var(--wui-control-sm);
  text-align:center;
  font-size:var(--wui-font-sm);
  font-weight:var(--wui-weight-bold)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-footer {
  flex:0 0 auto;
  padding:var(--wui-space-4);
  border-top: var(--wui-line)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-summary {
  display:grid;
  gap:var(--wui-space-2);
  margin-bottom:var(--wui-space-4)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-summary>div {
  display:flex;
  justify-content:space-between;
  gap:var(--wui-space-4)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-summary span {
  color:var(--wui-muted)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-summary-total {
  padding-top:var(--wui-space-3);
  margin-top:var(--wui-space-1);
  border-top: var(--wui-line);
  font-size:var(--wui-font-xl)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-summary-total span, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-summary-total strong {
  color:var(--wui-text)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-footer-actions .wui-btn {
  flex:1
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-payment-actions {
  margin-top:var(--wui-space-2)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-payment-actions .wui-btn {
  flex:1;
  min-height:var(--wui-control-lg)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-customer-list {
  display:grid;
  gap:var(--wui-space-2)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-customer-option {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--wui-space-3);
  padding:var(--wui-space-3);
  border: var(--wui-line);
  background:var(--wui-surface);
  color:var(--wui-text);
  font:inherit;
  text-align:left;
  cursor:pointer
}

@media (hover: hover) and (pointer: fine) {
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-customer-option:hover {
    background:var(--wui-state-hover-surface);
    border-color:var(--wui-control-border-hover)
  }
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-customer-option:focus-visible {
  outline:0;
  box-shadow:var(--wui-state-focus-ring)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-payment-info {
  display:grid;
  gap:var(--wui-space-2);
  margin-bottom:var(--wui-space-4)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-payment-info>div, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-change-row {
  display:flex;
  justify-content:space-between;
  gap:var(--wui-space-3);
  padding:var(--wui-space-3);
  border: var(--wui-line);
  background:var(--wui-surface-2)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-payment-info span, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-change-row span {
  color:var(--wui-muted)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-preview-modal {
  width:min(720px,calc(100% - 24px))
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-receipt {
  width:min(360px,100%);
  margin:auto;
  padding:var(--wui-space-6);
  border: var(--wui-line);
  background:var(--wui-white);
  color:var(--wui-black);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-receipt h4, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-receipt p {
  text-align:center;
  margin:0
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-receipt hr {
  border:0;
  border-top:1px dashed var(--wui-gray-600);
  margin:var(--wui-space-4) 0
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-receipt-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--wui-space-3);
  margin:var(--wui-space-2) 0;
  font-size:var(--wui-font-xs-plus)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-receipt-row strong {
  text-align:right
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-receipt-total {
  font-size:var(--wui-font-lg)
}

@media (max-width: 1180px) {
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-layout {
    grid-template-columns:1fr
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-card {
    position:static;
    max-height:none
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-list {
    max-height:420px
  }
}

@media print {
  :where(html[data-style~="pos"]) body[data-page="pos"] .wui-header, :where(html[data-style~="pos"]) body[data-page="pos"] .wui-sidebar, :where(html[data-style~="pos"]) body[data-page="pos"] .wui-page > :not(#posPreviewModal) {
    display:none
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] #posPreviewModal[open] {
    display:block;
    position:static;
    width:auto;
    min-height:0;
    max-height:none;
    margin:0;
    border:0;
    background:none
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] #posPreviewModal::backdrop {
    display:none
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .wui-dialog__header, :where(html[data-style~="pos"]) body[data-page="pos"] .wui-dialog__footer {
    display:none
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .wui-dialog__body {
    padding:0
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-receipt {
    border:0;
    width:var(--wui-output-width,80mm)
  }
  html:where([data-style~="pos"])[data-output-profile="THERMAL_80"] body[data-page="pos"] #posPreviewModal[open] {
    page:thermal80;
    width:80mm
  }
  html:where([data-style~="pos"])[data-output-profile="THERMAL_58"] body[data-page="pos"] #posPreviewModal[open] {
    page:thermal58;
    width:58mm
  }
  html:where([data-style~="pos"])[data-output-profile="THERMAL_80"] body[data-page="pos"] { page:thermal80; width:80mm }
  html:where([data-style~="pos"])[data-output-profile="THERMAL_58"] body[data-page="pos"] { page:thermal58; width:58mm }
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-gallery-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--wui-space-3)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-gallery-toolbar .pos-category-list {
  flex:1;
  min-width:0
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-view-actions {
  display:flex;
  gap:var(--wui-space-2);
  flex:0 0 auto
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-view-button {
  display:inline-flex;
  align-items:center;
  gap:var(--wui-space-2)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-view-button:is(.active,[aria-pressed="true"]) {
  background:var(--wui-state-selected-surface);
  border-color:transparent;
  color:var(--wui-state-selected-text)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-media {
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom: var(--wui-line);
  background:var(--wui-surface-2)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-media img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform var(--wui-motion-normal) var(--wui-ease-standard)
}

@media (hover: hover) and (pointer: fine) {
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product:hover .pos-product-media img {
    transform:scale(1.035)
  }
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-media-badge {
  position:absolute;
  left:9px;
  bottom:9px;
  padding:var(--wui-space-1) var(--wui-space-2);
  border: var(--wui-border-width) solid var(--wui-white);
  background:var(--wui-black);
  color:var(--wui-icon-white);
  font-size:var(--wui-font-xs);
  line-height:var(--wui-line-none)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-content {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:var(--wui-space-3) var(--wui-space-3)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid[data-view="compact"] {
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid[data-view="compact"] .pos-product {
  min-height:92px;
  display:grid;
  grid-template-columns:92px minmax(0,1fr)
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid[data-view="compact"] .pos-product-media {
  height:100%;
  aspect-ratio:auto;
  border-right: var(--wui-line);
  border-bottom:0
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid[data-view="compact"] .pos-product-media-badge {
  display:none
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid[data-view="compact"] .pos-product-content {
  min-width:0
}

:where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid[data-view="compact"] .pos-product-bottom {
  padding-top:var(--wui-space-2)
}

@media (max-width: 820px) {
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-header-actions {
    width:100%
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-header-actions .wui-btn {
    flex:1
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-products-header {
    align-items:stretch
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-search-wrap {
    width:100%
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-payment-actions .wui-btn {
    min-width:0
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-cart-item {
    padding:var(--wui-space-3) var(--wui-space-3)
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-gallery-toolbar {
    align-items:stretch;
    flex-direction:column
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-view-actions {
    align-self:flex-end
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product {
    min-height:200px
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid[data-view="compact"] {
    grid-template-columns:1fr
  }
}

@media (max-width: 820px) {
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity button {
    width:44px;
    height:var(--wui-control-md)
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity span {
    min-width:44px
  }
}

@media (max-width: 420px) {
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-grid {
    grid-template-columns:1fr;
    gap:var(--wui-space-3)
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-code, :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-stock {
    display:block
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-name {
    font-size:var(--wui-font-md)
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-price {
    font-size:var(--wui-font-md)
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity button {
    width:44px;
    height:var(--wui-control-md)
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-quantity span {
    min-width:44px
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-view-actions {
    width:100%
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-view-button {
    flex:1;
    justify-content:center;
    min-width:0;
    min-height:var(--wui-control-md)
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product {
    min-height:176px
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-content {
    padding:var(--wui-space-3)
  }
  :where(html[data-style~="pos"]) body[data-page="pos"] .pos-product-media-badge {
    display:none
  }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 23 — Ticari belgeler
   ========================================================================== */
/* WUI SECTION: pages/trade-document */
:where(html[data-style~="trade-document"]) .trade-document-page {
  --bg:var(--wui-page-bg);
  --panel:var(--wui-bg-card);
  --text:var(--wui-text-primary);
  --muted:var(--wui-text-tertiary);
  --line:var(--wui-border-soft);
  --accent:var(--wui-action-primary);
  position:relative;
  min-width:0;
  color:var(--text);
}

:where(html[data-style~="trade-document"]) .trade-document-page *, :where(html[data-style~="trade-document"]) .trade-document-page *::before, :where(html[data-style~="trade-document"]) .trade-document-page *::after {
  box-sizing:border-box
}

:where(html[data-style~="trade-document"]) .trade-document-page button, :where(html[data-style~="trade-document"]) .trade-document-page input, :where(html[data-style~="trade-document"]) .trade-document-page select, :where(html[data-style~="trade-document"]) .trade-document-page textarea {
  font:inherit
}

:where(html[data-style~="trade-document"]) .trade-document-page .is-hidden {
  display:none
}

:where(html[data-style~="trade-document"]) .trade-document-page-header {
  margin-bottom:var(--wui-space-3)
}

:where(html[data-style~="trade-document"]) .trade-doc-appbar {
  position:sticky;
  top:calc(var(--wui-topbar-h) + var(--wui-space-2));
  z-index:var(--wui-z-local-overlay);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--wui-space-4);
  padding:var(--wui-space-4);
  background:var(--panel);
  border:var(--wui-line)
}
:where(html[data-style~="trade-document"]) .trade-doc-toolbar { display:grid; gap:var(--wui-space-3); min-width:0 }
:where(html[data-style~="trade-document"]) .trade-doc-toolbar-group[data-toolbar-group="document"] {
  display:grid;
  grid-template-columns:minmax(180px,2fr) minmax(130px,1.4fr) minmax(95px,1fr) auto;
  align-items:end;
  gap:var(--wui-space-3);
  max-width:860px
}
:where(html[data-style~="trade-document"]) .trade-doc-toolbar-field { display:grid; gap:var(--wui-space-1); min-width:0 }
:where(html[data-style~="trade-document"]) .trade-doc-toolbar-field label, :where(html[data-style~="trade-document"]) .trade-doc-toolbar-label {
  font-size:var(--wui-font-xs);
  font-weight:var(--wui-weight-bold);
  color:var(--wui-text-secondary)
}
:where(html[data-style~="trade-document"]) .trade-doc-toolbar-field .wui-select-trigger, :where(html[data-style~="trade-document"]) .trade-doc-toolbar-field .wui-btn {
  min-height:var(--wui-control-sm);
  font-size:var(--wui-font-sm)
}
:where(html[data-style~="trade-document"]) .trade-doc-toolbar-group[data-toolbar-group="content"], :where(html[data-style~="trade-document"]) .trade-doc-toolbar-actions, :where(html[data-style~="trade-document"]) .wui-preview-mode {
  display:flex;
  align-items:center;
  gap:var(--wui-space-2);
  flex-wrap:wrap
}
:where(html[data-style~="trade-document"]) .trade-doc-toolbar-actions { justify-content:flex-end }
:where(html[data-style~="trade-document"]) .trade-doc-toolbar-actions .wui-btn { white-space:nowrap }
:where(html[data-style~="trade-document"]) .wui-preview-mode {
  gap:0;
  margin-left:var(--wui-space-2);
  border-left:var(--wui-line);
  padding-left:var(--wui-space-3)
}
:where(html[data-style~="trade-document"]) .wui-preview-mode .wui-btn { min-height:var(--wui-control-sm) }

:where(html[data-style~="trade-document"]) .trade-doc-workspace {
  padding:var(--wui-space-6) var(--wui-space-4) var(--wui-space-12);
  overflow:auto
}

:where(html[data-style~="trade-document"]) .trade-doc-page-shell {
  width:max-content;
  min-width:100%;
  display:flex;
  justify-content:center
}

@media screen {
  :where(html[data-style~="trade-document"]) .trade-document-page[data-preview-fit="fit"] .a4-page {
    zoom:var(--wui-preview-scale,1);
  }
}

:where(html[data-style~="trade-document"]) .a4-page {
  width:210mm;
  min-height:297mm;
  background:var(--wui-print-bg);
  color:var(--wui-print-text);
  box-shadow:var(--wui-raised-shadow);
  border:1px solid var(--wui-print-line);
  box-sizing:border-box
}

:where(html[data-style~="trade-document"]) .a4-inner {
  min-height:297mm;
  padding:5mm 4mm 4mm;
  display:flex;
  flex-direction:column;
  box-sizing:border-box
}

:where(html[data-style~="trade-document"]) .a4-page * {
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact
}

:where(html[data-style~="trade-document"]) .trade-print-root {
  display:none
}

:where(html[data-style~="trade-document"]) .trade-print-footer {
  margin-top:auto;
  padding-top:2mm;
  border-top:1px solid var(--wui-print-line);
  text-align:right;
  font-size:var(--wui-font-print-xxs);
  color:var(--wui-gray-500)
}

:where(html[data-style~="trade-document"]) .a4-header {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5mm;
  align-items:start;
  padding-bottom:4mm;
  border-bottom:1px solid var(--wui-print-line)
}

:where(html[data-style~="trade-document"]) .company-logo {
  width:42mm;
  height:8mm;
  display:flex;
  align-items:center;
  font-weight:var(--wui-weight-heavy);
  font-size:var(--wui-font-lg);
  letter-spacing:.8px
}

:where(html[data-style~="trade-document"]) .company-logo::before {
  content:"";
  width:8mm;
  height:8mm;
  border-radius:var(--wui-radius-ui);
  background:var(--wui-print-accent);
  margin-right:2.5mm
}

:where(html[data-style~="trade-document"]) .company-name {
  font-size:var(--wui-font-xs);
  font-weight:var(--wui-weight-heavy);
  margin-top:2mm
}

:where(html[data-style~="trade-document"]) .company-lines {
  font-size:var(--wui-font-print-md);
  line-height:var(--wui-line-normal);
  color:var(--wui-print-muted);
  margin-top:1mm
}

:where(html[data-style~="trade-document"]) .doc-center {
  text-align:center;
  padding-top:1mm
}

:where(html[data-style~="trade-document"]) .doc-center h2 {
  margin:0;
  font-size:var(--wui-font-print-title);
  letter-spacing:.7px
}

:where(html[data-style~="trade-document"]) .doc-center .doc-sub {
  margin-top:2mm;
  font-size:var(--wui-font-print-md);
  color:var(--wui-print-muted)
}

:where(html[data-style~="trade-document"]) .status {
  display:inline-flex;
  align-items:center;
  gap:1.3mm;
  margin-top:3mm;
  padding:1.2mm 2.2mm;
  border-radius:var(--wui-radius-round);
  background:var(--wui-warning-soft);
  color:var(--wui-brand-ink);
  border:1px solid var(--wui-warning-strong);
  font-size:var(--wui-font-print-sm);
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="trade-document"]) .status i {
  width:1.7mm;
  height:1.7mm;
  border-radius:var(--wui-radius-round);
  background:var(--wui-warning-strong)
}

:where(html[data-style~="trade-document"]) .status.is-active {
  background:var(--wui-success-soft);
  color:var(--wui-success-strong)
}

:where(html[data-style~="trade-document"]) .status.is-active i {
  background:var(--wui-success-strong)
}

:where(html[data-style~="trade-document"]) .status.is-cancelled {
  background:var(--wui-danger-soft);
  color:var(--wui-danger-strong)
}

:where(html[data-style~="trade-document"]) .status.is-cancelled i {
  background:var(--wui-danger-strong)
}

:where(html[data-style~="trade-document"]) .qr-box {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1.3mm
}

:where(html[data-style~="trade-document"]) .qr-box img {
  width:25mm;
  height:25mm;
  object-fit:contain
}

:where(html[data-style~="trade-document"]) .qr-label {
  font-size:var(--wui-font-print-xs);
  color:var(--wui-gray-500);
  text-transform:uppercase;
  letter-spacing:.4px
}

:where(html[data-style~="trade-document"]) .qr-no {
  font-size:var(--wui-font-print-xl);
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="trade-document"]) .info-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:6mm;
  margin-top:4mm
}

:where(html[data-style~="trade-document"]) .block-title {
  font-size:var(--wui-font-print-sm);
  font-weight:var(--wui-weight-heavy);
  letter-spacing:.65px;
  color:var(--wui-print-muted);
  text-transform:uppercase;
  padding-bottom:1.8mm;
  border-bottom:1px solid var(--wui-print-line)
}

:where(html[data-style~="trade-document"]) .party-block, :where(html[data-style~="trade-document"]) .meta-block {
  min-width:0
}

:where(html[data-style~="trade-document"]) .party-select {
  display:block;
  width:100%;
  margin-top:2mm;
  border:0;
  background:transparent;
  color:var(--wui-print-text);
  font-size:var(--wui-font-md);
  font-weight:var(--wui-weight-heavy);
  padding:0;
  appearance:none;
  outline:none
}

:where(html[data-style~="trade-document"]) .party-select:hover, :where(html[data-style~="trade-document"]) .party-select:focus {
  background:var(--wui-print-subtle-bg);
  box-shadow:var(--wui-shadow-focus-inset)
}

:where(html[data-style~="trade-document"]) .party-detail {
  margin-top:1.2mm;
  min-height:11mm;
  font-size:var(--wui-font-print-md);
  line-height:var(--wui-line-normal);
  color:var(--wui-print-muted)
}

:where(html[data-style~="trade-document"]) .meta-list {
  margin-top:1.3mm
}

:where(html[data-style~="trade-document"]) .meta-row {
  display:grid;
  grid-template-columns:29mm 1fr;
  align-items:center;
  min-height:7mm;
  border-bottom:1px solid var(--wui-gray-100);
  font-size:var(--wui-font-print-md)
}

:where(html[data-style~="trade-document"]) .meta-row>span:first-child {
  color:var(--wui-print-muted);
  font-weight:var(--wui-weight-bold)
}

:where(html[data-style~="trade-document"]) .doc-control {
  width:100%;
  height:6mm;
  border:0;
  background:transparent;
  color:var(--wui-print-text);
  font-size:var(--wui-font-print-md);
  font-weight:var(--wui-weight-heavy);
  outline:none;
  padding:0;
  text-align:right;
  appearance:none
}

:where(html[data-style~="trade-document"]) .doc-control:hover, :where(html[data-style~="trade-document"]) .doc-control:focus {
  background:var(--wui-print-subtle-bg);
  box-shadow:var(--wui-shadow-focus-inset)
}

:where(html[data-style~="trade-document"]) .meta-static {
  text-align:right;
  font-weight:var(--wui-weight-heavy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

:where(html[data-style~="trade-document"]) .inline-pick {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:1.5mm
}

:where(html[data-style~="trade-document"]) .inline-pick button {
  height:5.5mm;
  padding:0 2mm;
  border:1px solid var(--wui-print-line);
  border-radius:var(--wui-radius-ui);
  background:var(--wui-print-bg);
  font-size:var(--wui-font-print-xs);
  font-weight:var(--wui-weight-heavy);
  cursor:pointer
}

:where(html[data-style~="trade-document"]) .source-line {
  display:none;
  grid-template-columns:30mm 1fr;
  gap:4mm;
  margin-top:3mm;
  padding:2.2mm 0;
  border-top:1px solid var(--wui-gray-100);
  border-bottom:1px solid var(--wui-gray-100);
  font-size:var(--wui-font-print-sm)
}

:where(html[data-style~="trade-document"]) .source-line.show {
  display:grid
}

:where(html[data-style~="trade-document"]) .source-line .label {
  font-weight:var(--wui-weight-heavy);
  color:var(--wui-print-muted)
}

:where(html[data-style~="trade-document"]) .source-line .value {
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="trade-document"]) .items-section {
  margin-top:4mm
}

:where(html[data-style~="trade-document"]) .section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:4mm;
  margin-bottom:2mm
}

:where(html[data-style~="trade-document"]) .section-head h2 {
  font-size:var(--wui-font-print-xl);
  margin:0;
  text-transform:uppercase;
  letter-spacing:.55px
}

:where(html[data-style~="trade-document"]) .section-head small {
  font-size:var(--wui-font-print-xs);
  color:var(--wui-gray-500)
}

:where(html[data-style~="trade-document"]) .items-table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:var(--wui-font-print-sm)
}

:where(html[data-style~="trade-document"]) .items-table th {
  height:7mm;
  padding:1.2mm;
  border-top:1px solid var(--wui-print-line-strong);
  border-bottom:1px solid var(--wui-print-line-strong);
  text-align:left;
  color:var(--wui-print-muted);
  font-size:var(--wui-font-print-xs);
  text-transform:uppercase;
  letter-spacing:.35px
}

:where(html[data-style~="trade-document"]) .items-table td {
  height:8mm;
  padding:0 1.2mm;
  border-bottom:1px solid var(--wui-gray-100);
  vertical-align:middle
}

:where(html[data-style~="trade-document"]) .items-table .num {
  text-align:right
}

:where(html[data-style~="trade-document"]) .items-table .idx {
  width:5mm;
  text-align:center;
  color:var(--wui-gray-500)
}

:where(html[data-style~="trade-document"]) .items-table .product {
  width:40mm
}

:where(html[data-style~="trade-document"]) .items-table .code {
  width:18mm
}

:where(html[data-style~="trade-document"]) .items-table .qty {
  width:14mm
}

:where(html[data-style~="trade-document"]) .items-table .fire {
  width:13mm
}

:where(html[data-style~="trade-document"]) .items-table .net {
  width:14mm
}

:where(html[data-style~="trade-document"]) .items-table .unit {
  width:15mm
}

:where(html[data-style~="trade-document"]) .items-table .price {
  width:24mm
}

:where(html[data-style~="trade-document"]) .items-table .tax {
  width:13mm
}

:where(html[data-style~="trade-document"]) .items-table .total {
  width:25mm;
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="trade-document"]) .items-table .actions {
  width:8mm;
  text-align:center
}

:where(html[data-style~="trade-document"]) .cell-control {
  width:100%;
  height:6.5mm;
  border:0;
  background:transparent;
  color:var(--wui-print-text);
  padding:0;
  font-size:var(--wui-font-print-sm);
  outline:none;
  appearance:none
}

:where(html[data-style~="trade-document"]) .a4-page .wui-select-shell { min-width:0 }
:where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger {
  min-height:0;
  height:6.5mm;
  padding:0;
  padding-right:var(--wui-space-4);
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--wui-print-text);
  font-size:var(--wui-font-print-sm);
  font-weight:inherit;
  box-shadow:none
}
:where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger::after { opacity:0; right:var(--wui-space-1) }
:where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger:not(:disabled):focus-visible, :where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger:not(:disabled)[aria-expanded="true"] {
  color:var(--wui-print-text);
  background:var(--wui-print-subtle-bg);
  box-shadow:var(--wui-shadow-focus-inset)
}
:where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger:not(:disabled):focus-visible::after, :where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger:not(:disabled)[aria-expanded="true"]::after { opacity:1 }
@media (hover:hover) and (pointer:fine) {
:where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger:not(:disabled):hover { background:var(--wui-print-subtle-bg); box-shadow:var(--wui-shadow-focus-inset) }
:where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger:not(:disabled):hover::after { opacity:1 }
}

:where(html[data-style~="trade-document"]) .party-block > .wui-select-shell { margin-top:var(--wui-space-2) }
:where(html[data-style~="trade-document"]) .a4-page .party-block .wui-select-trigger { font-size:var(--wui-font-md); font-weight:var(--wui-weight-heavy); height:auto }
:where(html[data-style~="trade-document"]) .a4-page .meta-row .wui-select-trigger { font-size:var(--wui-font-print-md); font-weight:var(--wui-weight-heavy); text-align:right; justify-content:flex-end }
:where(html[data-style~="trade-document"]) .a4-page .wui-picker-field { min-width:0 }
:where(html[data-style~="trade-document"]) .a4-page .wui-picker-display {
  min-width:0;
  width:100%;
  padding-right:var(--wui-space-5);
  border:0;
  background:transparent;
  color:var(--wui-print-text);
  box-shadow:none
}
:where(html[data-style~="trade-document"]) .a4-page .wui-picker-trigger {
  opacity:0;
  top:0;
  right:0;
  width:var(--wui-space-5);
  height:100%;
  border:0;
  background:transparent
}
:where(html[data-style~="trade-document"]) .a4-page .wui-picker-trigger:disabled { pointer-events:none }
:where(html[data-style~="trade-document"]) .a4-page .wui-picker-field:focus-within .wui-picker-trigger:not(:disabled), :where(html[data-style~="trade-document"]) .a4-page .wui-picker-trigger[aria-expanded="true"]:not(:disabled) { opacity:1 }
:where(html[data-style~="trade-document"]) .a4-page .wui-picker-field:focus-within .wui-picker-display:not(:disabled):not([readonly]) { background:var(--wui-print-subtle-bg); box-shadow:var(--wui-shadow-focus-inset) }
:where(html[data-style~="trade-document"]) .a4-page .inline-pick button { opacity:0; border-color:transparent; background:transparent }
:where(html[data-style~="trade-document"]) .a4-page .inline-pick:focus-within button:not(:disabled) { opacity:1; border-color:var(--wui-print-line) }
:where(html[data-style~="trade-document"]) .a4-page input[type="number"] { appearance:textfield }
:where(html[data-style~="trade-document"]) .a4-page input[type="number"]::-webkit-inner-spin-button, :where(html[data-style~="trade-document"]) .a4-page input[type="number"]::-webkit-outer-spin-button { appearance:none; margin:0 }
:where(html[data-style~="trade-document"]) .a4-page .trade-print-value {
  display:block;
  min-height:0;
  height:auto;
  border:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  color:var(--wui-print-text);
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
@media (hover:hover) and (pointer:fine) {
:where(html[data-style~="trade-document"]) .a4-page .wui-picker-field:hover .wui-picker-trigger:not(:disabled), :where(html[data-style~="trade-document"]) .a4-page .inline-pick:hover button:not(:disabled) { opacity:1 }
}

:where(html[data-style~="trade-document"]) .cell-control.num {
  text-align:right
}

:where(html[data-style~="trade-document"]) .cell-control:hover, :where(html[data-style~="trade-document"]) .cell-control:focus {
  background:var(--wui-print-subtle-bg);
  box-shadow:var(--wui-shadow-focus-inset)
}

:where(html[data-style~="trade-document"]) .row-net {
  font-weight:var(--wui-weight-heavy);
  color:var(--wui-print-muted);
  text-align:right
}

:where(html[data-style~="trade-document"]) .line-total {
  text-align:right;
  font-weight:var(--wui-weight-heavy);
  white-space:nowrap
}

:where(html[data-style~="trade-document"]) .row-tax-amount {
  display:block;
  text-align:right;
  font-weight:var(--wui-weight-heavy);
  white-space:nowrap;
  color:var(--wui-print-muted)
}

:where(html[data-style~="trade-document"]) .remove-row {
  border:0;
  background:transparent;
  color:var(--wui-gray-300);
  font-size:var(--wui-font-sm);
  cursor:pointer
}

:where(html[data-style~="trade-document"]) .remove-row:hover {
  color:var(--wui-danger-strong)
}

:where(html[data-style~="trade-document"]) .page-flex {
  flex:1 1 auto;
  min-height:8mm
}

:where(html[data-style~="trade-document"]) .bottom-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:6mm;
  margin-top:5mm;
  align-items:stretch
}

:where(html[data-style~="trade-document"]) .bottom-grid.has-installment {
  grid-template-columns:3fr 1fr 2fr;
  gap:4mm
}

:where(html[data-style~="trade-document"]) .note-box, :where(html[data-style~="trade-document"]) .installment-box, :where(html[data-style~="trade-document"]) .summary-box {
  border-top:1px solid var(--wui-print-line-strong);
  padding-top:2mm;
  min-width:0
}

:where(html[data-style~="trade-document"]) .note-box textarea {
  width:100%;
  min-height:34mm;
  resize:none;
  border:0;
  outline:none;
  background:transparent;
  color:var(--wui-print-text);
  padding:1mm 0;
  font-size:var(--wui-font-print-md);
  line-height:var(--wui-line-normal);
  overflow:hidden;
  field-sizing:content
}

:where(html[data-style~="trade-document"]) .note-box textarea:hover, :where(html[data-style~="trade-document"]) .note-box textarea:focus {
  background:var(--wui-print-subtle-bg);
  box-shadow:var(--wui-shadow-focus-inset)
}

:where(html[data-style~="trade-document"]) .note-help {
  font-size:var(--wui-font-print-xs);
  color:var(--wui-gray-500);
  margin-top:1mm
}

:where(html[data-style~="trade-document"]) .installment-box .block-title {
  font-size:var(--wui-font-print-xs);
  letter-spacing:.35px
}

:where(html[data-style~="trade-document"]) .installment-compact {
  margin-top:1mm;
  font-size:var(--wui-font-print-xxs);
  line-height:var(--wui-line-tight);
  color:var(--wui-print-muted)
}

:where(html[data-style~="trade-document"]) .installment-down {
  padding:0 0 .8mm;
  border-bottom:1px solid var(--wui-gray-100);
  margin-bottom:.4mm
}

:where(html[data-style~="trade-document"]) .installment-down .k {
  font-size:var(--wui-font-print-xxs);
  color:var(--wui-gray-500)
}

:where(html[data-style~="trade-document"]) .installment-down .v {
  font-size:var(--wui-font-print-xxs);
  font-weight:var(--wui-weight-heavy);
  color:var(--wui-print-text);
  white-space:nowrap
}

:where(html[data-style~="trade-document"]) .installment-row {
  padding:.55mm 0;
  border-bottom:1px solid var(--wui-gray-100)
}

:where(html[data-style~="trade-document"]) .installment-row:last-child {
  border-bottom:0
}

:where(html[data-style~="trade-document"]) .installment-row-top {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1mm;
  white-space:nowrap
}

:where(html[data-style~="trade-document"]) .installment-no {
  font-weight:var(--wui-weight-heavy);
  color:var(--wui-print-text)
}

:where(html[data-style~="trade-document"]) .installment-date {
  font-size:var(--wui-font-print-xxs);
  color:var(--wui-print-muted)
}

:where(html[data-style~="trade-document"]) .installment-amount {
  margin-top:.15mm;
  text-align:right;
  font-size:var(--wui-font-print-xxs);
  font-weight:var(--wui-weight-heavy);
  color:var(--wui-print-text);
  white-space:nowrap
}

:where(html[data-style~="trade-document"]) .installment-empty {
  padding-top:1mm;
  font-size:var(--wui-font-print-xxs);
  color:var(--wui-gray-500)
}

:where(html[data-style~="trade-document"]) .summary-rows {
  margin-top:1mm
}

:where(html[data-style~="trade-document"]) .sum-row {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  min-height:7mm;
  border-bottom:1px solid var(--wui-gray-100);
  font-size:var(--wui-font-print-md)
}

:where(html[data-style~="trade-document"]) .sum-row span {
  color:var(--wui-print-muted)
}

:where(html[data-style~="trade-document"]) .sum-row strong {
  font-size:var(--wui-font-print-lg)
}

:where(html[data-style~="trade-document"]) .sum-row.grand {
  min-height:10mm;
  border-top:1px solid var(--wui-print-line-strong);
  border-bottom:0;
  margin-top:1mm
}

:where(html[data-style~="trade-document"]) .sum-row.grand span, :where(html[data-style~="trade-document"]) .sum-row.grand strong {
  font-size:var(--wui-font-xs-plus);
  color:var(--wui-print-text);
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="trade-document"]) .discount-input {
  width:25mm;
  height:6mm;
  border:0;
  background:transparent;
  text-align:right;
  font-size:var(--wui-font-print-md);
  font-weight:var(--wui-weight-heavy);
  outline:none
}

:where(html[data-style~="trade-document"]) .discount-input:hover, :where(html[data-style~="trade-document"]) .discount-input:focus {
  background:var(--wui-print-subtle-bg);
  box-shadow:var(--wui-shadow-focus-inset)
}

:where(html[data-style~="trade-document"]) .edit-hint {
  position:fixed;
  left:16px;
  bottom:14px;
  z-index:var(--wui-z-local-above);
  padding:var(--wui-space-2);
  border:1px solid var(--line);
  border-radius:var(--wui-radius-ui);
  background:var(--panel);
  color:var(--muted);
  font-size:var(--wui-font-print-xl);
  box-shadow:var(--wui-shadow-sm)
}

:where(html[data-style~="trade-document"]) .trade-dialog-content {
  width:100%
}

:where(html[data-style~="trade-document"]) .trade-document-page .wui-dialog {
  width:min(640px,calc(100vw - 2 * var(--wui-space-4)))
}

:where(html[data-style~="trade-document"]) .trade-document-page .wui-dialog__header h3 {
  margin:0;
  font-size:var(--wui-font-md)
}

:where(html[data-style~="trade-document"]) .trade-dialog-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--wui-space-3)
}

:where(html[data-style~="trade-document"]) .trade-dialog-field-full {
  grid-column:1/-1
}

:where(html[data-style~="trade-document"]) .account-list {
  display:grid;
  gap:var(--wui-space-2)
}

:where(html[data-style~="trade-document"]) .account-option {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--wui-space-2);
  padding:var(--wui-space-2);
  border:1px solid var(--line);
  border-radius:var(--wui-radius-ui);
  cursor:pointer
}

:where(html[data-style~="trade-document"]) .account-option:hover {
  border-color:var(--accent)
}

:where(html[data-style~="trade-document"]) .account-option strong {
  display:block;
  font-size:var(--wui-font-xs-plus)
}

:where(html[data-style~="trade-document"]) .account-option span {
  font-size:var(--wui-font-print-xl);
  color:var(--muted)
}

:where(html[data-style~="trade-document"]) .trade-schedule {
  margin-top:var(--wui-space-4);
  border:1px solid var(--line);
  border-radius:var(--wui-radius-ui);
  overflow:hidden
}

:where(html[data-style~="trade-document"]) .trade-schedule-head, :where(html[data-style~="trade-document"]) .trade-schedule-row {
  display:grid;
  grid-template-columns:52px 1fr 120px;
  gap:var(--wui-space-2);
  align-items:center;
  padding:var(--wui-space-2)
}

:where(html[data-style~="trade-document"]) .trade-schedule-head {
  background:color-mix(in srgb,var(--panel) 82%,var(--bg));
  font-size:var(--wui-font-print-xl);
  color:var(--muted);
  font-weight:var(--wui-weight-heavy)
}

:where(html[data-style~="trade-document"]) .trade-schedule-row {
  border-top:1px solid var(--line);
  font-size:var(--wui-font-xs)
}

:where(html[data-style~="trade-document"]) .trade-schedule-row .wui-control {
  min-height:var(--wui-control-xs);
  height:var(--wui-control-xs)
}

:where(html[data-style~="trade-document"]) .trade-document-page pre {
  white-space:pre-wrap;
  word-break:break-word;
  font-size:var(--wui-font-xs);
  line-height:var(--wui-line-normal);
  color:var(--text)
}

:where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode #saveBtn, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode #addRowBtn, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode #toggleFireBtn, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode #sourceDemoBtn, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .remove-row, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .items-table .actions, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .inline-pick button, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode #paymentPlanBtn, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode #accountPickBtn {
  display:none
}

:where(html[data-style~="trade-document"]) .trade-document-page.is-edit-mode #editBtn, :where(html[data-style~="trade-document"]) .trade-document-page.is-new-mode #editBtn {
  display:none
}

:where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .cell-control, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .doc-control, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .party-select, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .discount-input, :where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .note-box textarea {
  pointer-events:none
}

:where(html[data-style~="trade-document"]) .trade-document-page.is-view-mode .edit-hint {
  display:none
}

:where(html[data-style~="trade-document"]) .meta-row>label:first-child, :where(html[data-style~="trade-document"]) .sum-row label {
  color:var(--wui-print-muted);
  font-weight:var(--wui-weight-bold)
}

@media(max-width:1180px) {
  :where(html[data-style~="trade-document"]) .trade-doc-appbar { grid-template-columns:minmax(0,1fr) }
}

@media(max-width:820px) {
  :where(html[data-style~="trade-document"]) .trade-doc-appbar { grid-template-columns:minmax(0,1fr); position:static }
  :where(html[data-style~="trade-document"]) .trade-doc-toolbar-actions { justify-content:flex-end; padding-top:var(--wui-space-3); border-top:var(--wui-line) }
  :where(html[data-style~="trade-document"]) .trade-doc-toolbar-group[data-toolbar-group="document"] { grid-template-columns:repeat(2,minmax(0,1fr)) }
  :where(html[data-style~="trade-document"]) .trade-doc-toolbar-field .wui-btn { width:100% }
  :where(html[data-style~="trade-document"]) .trade-doc-workspace {
    padding:var(--wui-space-4) var(--wui-space-3) var(--wui-space-10)
  }
  :where(html[data-style~="trade-document"]) .trade-doc-page-shell {
    width:100%;
    min-width:0;
    justify-content:center;
    padding:0
  }
  :where(html[data-style~="trade-document"]) .edit-hint {
    display:none
  }
}

@media print {
  @page wui-trade-document {
    size:A4 portrait;
    margin:0
  }
  :where(html[data-style~="trade-document"]) .wui-header, :where(html[data-style~="trade-document"]) .wui-sidebar, :where(html[data-style~="trade-document"]) .trade-document-page-header {
    display:none
  }
  :where(html[data-style~="trade-document"]) .wui-shell, :where(html[data-style~="trade-document"]) .wui-main, :where(html[data-style~="trade-document"]) .wui-page {
    width:210mm;
    max-width:none;
    min-height:0;
    margin:0;
    padding:0;
    background:var(--wui-print-bg)
  }
  :where(html[data-style~="trade-document"]) .wui-main {
    padding-top:0
  }
  :where(html[data-style~="trade-document"]) .trade-document-page {
    width:210mm;
    margin:0;
    padding:0
  }
  html:where([data-style~="trade-document"]), :where(html[data-style~="trade-document"]) body {
    width:210mm;
    margin:0;
    padding:0;
    background:var(--wui-print-bg)
  }
  :where(html[data-style~="trade-document"]) .trade-doc-appbar, :where(html[data-style~="trade-document"]) .edit-hint, :where(html[data-style~="trade-document"]) .wui-dialog, :where(html[data-style~="trade-document"]) .screen-only, :where(html[data-style~="trade-document"]) .remove-row {
    display:none
  }
  :where(html[data-style~="trade-document"]) .trade-doc-workspace {
    display:none
  }
  :where(html[data-style~="trade-document"]) .trade-doc-page-shell {
    display:none
  }
  :where(html[data-style~="trade-document"]) .trade-print-root {
    display:block;
    width:var(--wui-output-width,210mm);
    padding:0;
    margin:0;
    overflow:visible
  }
  :where(html[data-style~="trade-document"]) .a4-page {
    width:210mm;
    min-height:297mm;
    margin:0;
    border:0;
    box-shadow:none
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-a4-output {
    break-after:page;
    page-break-after:always
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-a4-output:last-child {
    break-after:auto;
    page-break-after:auto
  }
  :where(html[data-style~="trade-document"]) .items-table thead {
    display:table-header-group
  }
  :where(html[data-style~="trade-document"]) .items-table tr, :where(html[data-style~="trade-document"]) .bottom-grid, :where(html[data-style~="trade-document"]) .summary-box, :where(html[data-style~="trade-document"]) .installment-box {
    break-inside:avoid;
    page-break-inside:avoid
  }
  :where(html[data-style~="trade-document"]) .note-box textarea {
    overflow:visible
  }
  :where(html[data-style~="trade-document"]) .a4-inner {
    min-height:297mm
  }
  :where(html[data-style~="trade-document"]) .doc-control, :where(html[data-style~="trade-document"]) .cell-control, :where(html[data-style~="trade-document"]) .party-select, :where(html[data-style~="trade-document"]) .discount-input, :where(html[data-style~="trade-document"]) .note-box textarea {
    background:transparent;
    box-shadow:none
  }
  :where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger, :where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger:not(:disabled):is(:hover,:focus-visible,[aria-expanded="true"]) { background:transparent; box-shadow:none; border:0; color:var(--wui-print-text) }
  :where(html[data-style~="trade-document"]) .a4-page .wui-select-trigger::after { display:none }
  :where(html[data-style~="trade-document"]) .inline-pick button, :where(html[data-style~="trade-document"]) .a4-page .wui-picker-trigger {
    display:none
  }
  :where(html[data-style~="trade-document"]) .items-table th {
    background:var(--wui-print-bg)
  }
  html:where([data-style~="trade-document"])[data-output-profile="THERMAL_80"], html:where([data-style~="trade-document"])[data-output-profile="THERMAL_80"] body, html:where([data-style~="trade-document"])[data-output-profile="THERMAL_80"] .wui-shell, html:where([data-style~="trade-document"])[data-output-profile="THERMAL_80"] .wui-main, html:where([data-style~="trade-document"])[data-output-profile="THERMAL_80"] .wui-page, html:where([data-style~="trade-document"])[data-output-profile="THERMAL_80"] .trade-document-page {
    width:80mm
  }
  html:where([data-style~="trade-document"])[data-output-profile="THERMAL_58"], html:where([data-style~="trade-document"])[data-output-profile="THERMAL_58"] body, html:where([data-style~="trade-document"])[data-output-profile="THERMAL_58"] .wui-shell, html:where([data-style~="trade-document"])[data-output-profile="THERMAL_58"] .wui-main, html:where([data-style~="trade-document"])[data-output-profile="THERMAL_58"] .wui-page, html:where([data-style~="trade-document"])[data-output-profile="THERMAL_58"] .trade-document-page {
    width:58mm
  }
  html:where([data-style~="trade-document"])[data-output-profile="THERMAL_80"] .trade-print-page {
    page:thermal80;
    width:80mm
  }
  html:where([data-style~="trade-document"])[data-output-profile="THERMAL_58"] .trade-print-page {
    page:thermal58;
    width:58mm
  }
  html:where([data-style~="trade-document"])[data-output-profile="THERMAL_80"] body { page:thermal80 }
  html:where([data-style~="trade-document"])[data-output-profile="THERMAL_58"] body { page:thermal58 }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output {
    min-height:0
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .a4-inner {
    min-height:0;
    padding:3mm
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .a4-header {
    grid-template-columns:1fr;
    text-align:center;
    gap:2mm
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .company-logo {
    width:auto;
    justify-content:center
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .company-lines {
    font-size:var(--wui-font-print-xs)
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .qr-box {
    display:none
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .info-grid {
    grid-template-columns:1fr;
    gap:2mm
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .party-detail {
    min-height:0
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table, :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table tbody, :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table tr, :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td {
    display:block;
    width:100%;
    height:auto
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table thead {
    display:none
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table tr {
    padding:2mm 0;
    border-bottom:1px dashed var(--wui-gray-300);
    break-inside:avoid
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td {
    display:grid;
    grid-template-columns:18mm 1fr;
    gap:1mm;
    padding:.5mm 0;
    border:0;
    text-align:right
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td.is-hidden, :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td.actions {
    display:none
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td::before {
    font-weight:var(--wui-weight-bold);
    text-align:left;
    color:var(--wui-print-muted)
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(1)::before {
    content:"Kalem"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(2)::before {
    content:"Ürün"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(3)::before {
    content:"Kod"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(4)::before {
    content:"Miktar"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(5)::before {
    content:"Fire"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(6)::before {
    content:"Net"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(7)::before {
    content:"Birim"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(8)::before {
    content:"Fiyat"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(9)::before {
    content:"KDV"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .items-table td:nth-child(10)::before {
    content:"Toplam"
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .cell-control {
    height:auto;
    text-align:right
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .bottom-grid, :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .bottom-grid.has-installment {
    grid-template-columns:1fr;
    gap:3mm
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .note-box textarea {
    min-height:12mm
  }
  :where(html[data-style~="trade-document"]) .trade-print-page.is-thermal-output .trade-print-footer {
    text-align:center
  }
}

@media screen {
  :where(html[data-style~="trade-document"]) .trade-doc-appbar {
    border:1px solid var(--line);
    border-radius:var(--wui-radius-ui);
    margin-bottom:var(--wui-space-3);
    box-shadow:none
  }
  :where(html[data-style~="trade-document"]) .trade-document-page .trade-doc-workspace {
    border-radius:var(--wui-radius-ui);
    background:var(--wui-subtle-bg)
  }
}

@media print {
  html:where([data-style~="trade-document"]) body {
    page: wui-trade-document;
  }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 24 — Ayarlar sayfası
   ========================================================================== */
/* WUI SECTION: pages/settings */
:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--wui-space-2);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color {
  --wui-brand-swatch: var(--wui-brand-cyan);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--wui-space-2);
  min-height: var(--wui-hit-target-min);
  padding: var(--wui-space-2);
  border: 1px solid var(--wui-border-soft);
  border-radius: var(--wui-radius-ui);
  background: var(--wui-bg-card);
  color: var(--wui-text-primary);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color.is-primary {
  border-color: var(--wui-accent-strong);
  background: var(--wui-accent-soft);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color__swatch {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--wui-control-border);
  border-radius: var(--wui-radius-round);
  background: var(--wui-brand-swatch);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color > span:not(.wui-brand-color__swatch) {
  display: grid;
  gap: var(--wui-space-1);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color small {
  color: var(--wui-text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color em {
  margin-inline-start: auto;
  color: var(--wui-accent-text);
  font-size: var(--wui-font-xs);
  font-style: normal;
  font-weight: var(--wui-weight-bold);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color--ink {
  --wui-brand-swatch: var(--wui-brand-ink);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color--mid {
  --wui-brand-swatch: var(--wui-brand-mid);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color--navy {
  --wui-brand-swatch: var(--wui-brand-navy);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color--cyan {
  --wui-brand-swatch: var(--wui-brand-cyan);
}

:where(html[data-style~="settings"]) body[data-page="settings"] .wui-brand-color--cyan-strong {
  --wui-brand-swatch: var(--wui-brand-cyan-strong);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 25 — Yazdırma profilleri
   ========================================================================== */
/* GRUP 05 — ÇIKTI VE YARDIMCILAR */
/* WUI SECTION: pages/jetson */
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-tabs { display:flex; gap:0; margin-bottom:var(--wui-space-2); border-bottom:var(--wui-line); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-tab { appearance:none; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--wui-muted); min-height:40px; padding:0 var(--wui-space-4); font:inherit; font-weight:var(--wui-weight-semibold); cursor:pointer; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-tab:hover { color:var(--wui-text); background:var(--wui-bg-hover); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-tab.is-active { color:var(--wui-primary); border-bottom-color:var(--wui-primary); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] [data-jetson-panel][hidden] { display:none; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-strip { display:grid; grid-template-columns:minmax(240px,1.6fr) repeat(4,minmax(110px,.7fr)); gap:0; padding:0; overflow:hidden; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-strip > div { min-width:0; display:grid; gap:var(--wui-space-1); padding:var(--wui-space-3); border-right:var(--wui-line); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-strip > div:last-child { border-right:0; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-strip small { color:var(--wui-text-tertiary); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-main { grid-template-columns:auto 1fr; align-items:center; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-main > div { display:grid; gap:var(--wui-space-1); min-width:0; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-mark { width:12px; height:34px; background:var(--wui-primary); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-main span:last-child { color:var(--wui-muted); font-size:var(--wui-font-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--wui-space-2); margin-top:var(--wui-space-2); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-card { padding:var(--wui-space-3); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-head, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-value { display:flex; align-items:baseline; justify-content:space-between; gap:var(--wui-space-2); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-head > span { display:flex; align-items:center; gap:var(--wui-space-1); font-weight:var(--wui-weight-bold); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-head small, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-value span { color:var(--wui-text-tertiary); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-value { margin:var(--wui-space-3) 0 var(--wui-space-2); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-value strong { font-size:clamp(var(--wui-font-xl-plus),2vw,var(--wui-font-2xl)); line-height:var(--wui-line-none); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-meter { height:6px; overflow:hidden; background:var(--wui-bg-hover); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-meter > span { display:block; height:100%; min-width:0; width:0; background:var(--wui-primary); transition:width var(--wui-motion-slow) var(--wui-ease-standard); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-service-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--wui-space-2); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-service-strip > div { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:var(--wui-space-2); align-items:center; padding:var(--wui-space-2); border:var(--wui-line); background:var(--wui-raised-bg); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-status-dot { width:9px; height:9px; border-radius:var(--wui-radius-round); background:var(--wui-text-tertiary); grid-row:1/3; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-status-dot.is-ok { background:var(--wui-success); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-status-dot.is-warning { background:var(--wui-warning); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-status-dot.is-danger { background:var(--wui-danger); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-service-strip small { color:var(--wui-muted); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-card { overflow:hidden; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-output { min-height:420px; max-height:62vh; overflow:auto; padding:var(--wui-space-4); background:var(--wui-code-bg); color:var(--wui-code-text); font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-note { color:var(--wui-gray-375); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-command { margin-top:var(--wui-space-2); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-command:first-child { margin-top:0; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-head { display:flex; align-items:center; justify-content:space-between; gap:var(--wui-space-2); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-prompt { color:var(--wui-code-info); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-prompt strong { color:var(--wui-code-success); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-status { display:inline-flex; align-items:center; min-height:20px; padding:var(--wui-space-1) var(--wui-space-2); border:1px solid currentColor; color:var(--wui-code-warning); font-size:var(--wui-font-2xs); font-weight:var(--wui-weight-bold); line-height:var(--wui-line-none); white-space:nowrap; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-status[data-status="done"] { color:var(--wui-code-success); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-status[data-status="error"], :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-status[data-status="timeout"] { color:var(--wui-code-danger); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-status[data-status="cancelled"] { color:var(--wui-gray-400); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-input, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-stdout, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-stderr { margin:var(--wui-space-1) 0 0; padding:0; border:0; background:transparent; color:inherit; font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-input { color:var(--wui-code-info); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-stderr { color:var(--wui-code-danger); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-command-meta { color:var(--wui-gray-400); font-size:var(--wui-font-xs); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-compose { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--wui-space-2); padding:var(--wui-space-3); border-top:var(--wui-line); background:var(--wui-card-bg); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-prompt { font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-compose textarea { width:100%; min-width:0; min-height:var(--wui-control-sm); max-height:180px; resize:none; overflow:auto; border:var(--wui-line); border-color:var(--wui-control-border); background:var(--wui-input-bg); color:var(--wui-text); padding:var(--wui-space-2) var(--wui-space-3); font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-compose textarea:focus { outline:2px solid var(--wui-focus); outline-offset:1px; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-hint { grid-column:2/3; color:var(--wui-text-tertiary); font-size:var(--wui-font-xs); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--wui-space-2); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-action-grid .wui-btn-danger { grid-column:1/-1; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-action-note { min-height:20px; margin:var(--wui-space-3) 0 0; color:var(--wui-muted); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-login-dialog { width:min(440px,calc(100vw - 32px)); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-form-error { color:var(--wui-danger-strong); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-dialog-actions { margin-top:var(--wui-space-3); justify-content:flex-end; }

/* cPanel-like file manager, scoped to the Jetson page only. */
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-card { overflow:hidden; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-header { align-items:flex-start; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-file-limit { color:var(--wui-muted); font-size:var(--wui-font-xs); text-align:right; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-toolbar { display:flex; flex-wrap:wrap; gap:var(--wui-space-1); padding:var(--wui-space-2) var(--wui-space-3); border-top:var(--wui-line); border-bottom:var(--wui-line); background:var(--wui-raised-bg); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-nav { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,280px); gap:var(--wui-space-2); align-items:center; padding:var(--wui-space-2) var(--wui-space-3); border-bottom:var(--wui-line); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wui-space-1); min-width:0; font-size:var(--wui-font-sm); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-breadcrumb button { appearance:none; border:0; background:transparent; color:var(--wui-primary); padding:var(--wui-space-1); cursor:pointer; font:inherit; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-breadcrumb span { color:var(--wui-text-tertiary); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-search { width:100%; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-dropzone { position:relative; min-height:420px; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-dropzone.is-dragover::after { content:"Dosyaları buraya bırak"; position:absolute; inset:var(--wui-space-3); z-index:var(--wui-z-local-overlay); display:grid; place-items:center; border:2px dashed var(--wui-primary); background:color-mix(in srgb,var(--wui-card-bg) 88%,transparent); color:var(--wui-primary); font-weight:var(--wui-weight-bold); pointer-events:none; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table-wrap { overflow:auto; min-height:360px; max-height:58vh; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table { width:100%; border-collapse:collapse; table-layout:fixed; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td { padding:var(--wui-space-2) var(--wui-space-3); border-bottom:var(--wui-line); text-align:left; vertical-align:middle; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th { position:sticky; top:0; z-index:var(--wui-z-local-above); background:var(--wui-card-bg); color:var(--wui-text-tertiary); font-size:var(--wui-font-xs); font-weight:var(--wui-weight-semibold); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th:nth-child(1), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td:nth-child(1) { width:42px; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th:nth-child(2), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td:nth-child(2) { width:auto; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th:nth-child(3), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td:nth-child(3) { width:110px; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th:nth-child(4), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td:nth-child(4) { width:120px; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th:nth-child(5), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td:nth-child(5) { width:170px; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table tbody tr { cursor:default; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table tbody tr:hover { background:var(--wui-bg-hover); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table tbody tr.is-selected { background:var(--wui-bg-hover); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-file-name { display:flex; align-items:center; gap:var(--wui-space-2); min-width:0; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-file-name button { appearance:none; border:0; background:transparent; color:inherit; padding:0; font:inherit; text-align:left; cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-file-icon { width:22px; flex:0 0 22px; text-align:center; font-size:var(--wui-font-xl); line-height:var(--wui-line-none); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-empty { height:220px; text-align:center; color:var(--wui-muted); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-drop-hint { padding:var(--wui-space-2) var(--wui-space-3); border-top:var(--wui-line); color:var(--wui-text-tertiary); font-size:var(--wui-font-xs); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-footer { display:flex; justify-content:space-between; gap:var(--wui-space-2); padding:var(--wui-space-2) var(--wui-space-3); border-top:var(--wui-line); color:var(--wui-muted); font-size:var(--wui-font-xs); }

@media (max-width:1180px) {
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-main { grid-column:1/-1; border-bottom:var(--wui-line); }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-strip > div { border-right:var(--wui-line); border-bottom:var(--wui-line); }
}
@media (max-width:820px) {
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-service-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-compose { grid-template-columns:1fr auto; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-prompt { grid-column:1/-1; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-hint { grid-column:1/-1; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-nav { grid-template-columns:1fr; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th:nth-child(3), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td:nth-child(3) { display:none; }
}
@media (max-width:540px) {
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-tabs { overflow:auto; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-tab { flex:1 0 auto; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-strip, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-metric-grid, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-service-strip, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-action-grid { grid-template-columns:1fr; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-main { grid-column:auto; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-device-strip > div { border-right:0; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-action-grid .wui-btn-danger { grid-column:auto; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-terminal-output { min-height:300px; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th:nth-child(4), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td:nth-child(4), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table th:nth-child(5), :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-table td:nth-child(5) { display:none; }
  :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-files-footer { flex-direction:column; }
}


/* Safe system logs, scoped to Jetson page. */
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-logs-card { overflow:hidden; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-logs-header { align-items:flex-start; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-logs-toolbar { display:flex; justify-content:space-between; align-items:center; gap:var(--wui-space-2); flex-wrap:wrap; padding:var(--wui-space-2) var(--wui-space-3); border-top:var(--wui-line); border-bottom:var(--wui-line); background:var(--wui-raised-bg); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-log-source { display:flex; flex-wrap:wrap; gap:var(--wui-space-1); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-log-source .wui-btn.is-active { border-color:var(--wui-primary); color:var(--wui-primary); background:var(--wui-bg-hover); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-log-lines { display:flex; align-items:center; gap:var(--wui-space-2); color:var(--wui-muted); font-size:var(--wui-font-xs); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-log-lines .wui-control { width:auto; min-width:110px; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-logs-output { margin:0; min-height:420px; max-height:60vh; overflow:auto; padding:var(--wui-space-3); background:var(--wui-code-bg); color:var(--wui-code-text); font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-logs-footer { display:flex; justify-content:space-between; gap:var(--wui-space-2); padding:var(--wui-space-2) var(--wui-space-3); border-top:var(--wui-line); color:var(--wui-muted); font-size:var(--wui-font-xs); }
@media (max-width:540px) { :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-logs-toolbar, :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-logs-footer { align-items:stretch; flex-direction:column; } :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-log-source .wui-btn { flex:1 1 auto; } }

:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-meter-static span { opacity:.75; }


/* WORKI voice selection lives on the Jetson page. */
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-settings-card .wui-card-header { align-items:flex-start; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-settings-grid { display:grid; grid-template-columns:minmax(220px,1.1fr) minmax(220px,1fr) auto; gap:var(--wui-space-3); align-items:end; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-profile { display:flex; flex-direction:column; gap:var(--wui-space-1); min-height:64px; justify-content:flex-end; }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-profile > span { color:var(--wui-text-tertiary); font-size:var(--wui-font-xs); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-profile > strong { font-size:var(--wui-font-sm); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-profile > small { color:var(--wui-muted); line-height:var(--wui-line-compact); }
:where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-save { display:flex; flex-direction:column; gap:var(--wui-space-2); min-width:150px; }
@media (max-width:820px) { :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-settings-grid { grid-template-columns:1fr; align-items:stretch; } :where(html[data-style~="jetson"]) body[data-page="jetson"] .jetson-voice-save { min-width:0; } }
/* WUI END SECTION */


/* WUI SECTION: print-profiles */
@media print {
  @page thermal80 {
    size:80mm 200mm;
    margin:0;
  }
  @page thermal58 {
    size:58mm 200mm;
    margin:0;
  }
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 26 — İkon sistemi
   ========================================================================== */
/* WUI SECTION: icons */
/* Standard icon geometry utilities. */
.wui-icon-size-xs {
  width: var(--wui-icon-xs);
  height: var(--wui-icon-xs);
}

.wui-icon-size-sm {
  width: var(--wui-icon-sm);
  height: var(--wui-icon-sm);
}

.wui-icon-size-md {
  width: var(--wui-icon-md);
  height: var(--wui-icon-md);
}

.wui-icon-size-lg {
  width: var(--wui-icon-lg);
  height: var(--wui-icon-lg);
}

.wui-icon-size-nav {
  width: var(--wui-icon-nav);
  height: var(--wui-icon-nav);
}

/* =========================================================
ICON SYSTEM
========================================================= */
/* Runtime uses only the light/dark theme SVG pair; hover and active never swap the icon. */
.wui-nav-icon .wui-icon {
  width: var(--wui-icon-nav);
  height: var(--wui-icon-nav);
}

.wui-toast-icon-box .wui-icon, .wui-toast-close .wui-icon {
  width: var(--wui-icon-sm);
  height: var(--wui-icon-sm);
  opacity: 1;
}

.wui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: middle;
  background-color: transparent;
  background-image: var(--wui-icon-image-current, var(--wui-icon-image-light));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.wui-table-action .wui-icon {
  display: block;
  width: var(--wui-table-action-icon);
  height: var(--wui-table-action-icon);
  background-image: var(--wui-icon-image-current, var(--wui-icon-image-light));
  -webkit-mask-image: none;
  mask-image: none;
}

.wui-topbar .wui-ui-icon {
  width: var(--wui-icon-nav);
  height: var(--wui-icon-nav);
}

@media (max-width: 820px) {
  .wui-nav-icon .wui-icon, .wui-topbar .wui-ui-icon {
    width: var(--wui-icon-xl);
    height: var(--wui-icon-xl);
  }
}

/* Danger close actions are drawn with currentColor so they match both themes. */
.wui-btn-danger .wui-icon-close {
  position: relative;
  background-image: none;
}

.wui-btn-danger .wui-icon-close::before, .wui-btn-danger .wui-icon-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: 3px;
  background: currentColor;
  transform-origin: center;
}

.wui-btn-danger .wui-icon-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.wui-btn-danger .wui-icon-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Icon surfaces and theme glyphs belong to the icon layer. */
.wui-icon, .wui-btn .wui-icon, .wui-btn svg, .wui-btn img {
  background-color: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: var(--wui-motion-reduced);
    animation-iteration-count: 1;
    transition-duration: var(--wui-motion-reduced);
  }
  .wui-btn.is-loading::after {
    animation: none;
    opacity:1;
    border-right-color: transparent;
  }
}

/* WUI ICON THEME ADAPTATION — GENERATED START */
/* One light + one dark asset per icon; no source/hover/active duplicate. */
.wui-icon-activity {
  --wui-icon-image-light: url("../icons/theme/light/activity.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/activity.svg");
}

.wui-icon-angle-bottom {
  --wui-icon-image-light: url("../icons/theme/light/angle-bottom.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/angle-bottom.svg");
}

.wui-icon-angle-left {
  --wui-icon-image-light: url("../icons/theme/light/angle-left.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/angle-left.svg");
}

.wui-icon-angle-right {
  --wui-icon-image-light: url("../icons/theme/light/angle-right.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/angle-right.svg");
}

.wui-icon-angle-top {
  --wui-icon-image-light: url("../icons/theme/light/angle-top.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/angle-top.svg");
}

.wui-icon-arrow-bottom {
  --wui-icon-image-light: url("../icons/theme/light/arrow-bottom.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/arrow-bottom.svg");
}

.wui-icon-arrow-left {
  --wui-icon-image-light: url("../icons/theme/light/arrow-left.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/arrow-left.svg");
}

.wui-icon-arrow-right {
  --wui-icon-image-light: url("../icons/theme/light/arrow-right.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/arrow-right.svg");
}

.wui-icon-arrow-top {
  --wui-icon-image-light: url("../icons/theme/light/arrow-top.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/arrow-top.svg");
}

.wui-icon-badge {
  --wui-icon-image-light: url("../icons/theme/light/badge.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/badge.svg");
}

.wui-icon-bag {
  --wui-icon-image-light: url("../icons/theme/light/bag.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/bag.svg");
}

.wui-icon-battery {
  --wui-icon-image-light: url("../icons/theme/light/battery.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/battery.svg");
}

.wui-icon-bottle {
  --wui-icon-image-light: url("../icons/theme/light/bottle.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/bottle.svg");
}

.wui-icon-box {
  --wui-icon-image-light: url("../icons/theme/light/box.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/box.svg");
}

.wui-icon-briefcase {
  --wui-icon-image-light: url("../icons/theme/light/briefcase.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/briefcase.svg");
}

.wui-icon-building {
  --wui-icon-image-light: url("../icons/theme/light/building.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/building.svg");
}

.wui-icon-bulb {
  --wui-icon-image-light: url("../icons/theme/light/bulb.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/bulb.svg");
}

.wui-icon-bullhorn {
  --wui-icon-image-light: url("../icons/theme/light/bullhorn.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/bullhorn.svg");
}

.wui-icon-calculator {
  --wui-icon-image-light: url("../icons/theme/light/calculator.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/calculator.svg");
}

.wui-icon-calendar {
  --wui-icon-image-light: url("../icons/theme/light/calendar.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/calendar.svg");
}

.wui-icon-camera {
  --wui-icon-image-light: url("../icons/theme/light/camera.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/camera.svg");
}

.wui-icon-card {
  --wui-icon-image-light: url("../icons/theme/light/card.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/card.svg");
}

.wui-icon-cart {
  --wui-icon-image-light: url("../icons/theme/light/cart.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/cart.svg");
}

.wui-icon-chat {
  --wui-icon-image-light: url("../icons/theme/light/chat.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/chat.svg");
}

.wui-icon-check {
  --wui-icon-image-light: url("../icons/theme/light/check.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/check.svg");
}

.wui-icon-clock {
  --wui-icon-image-light: url("../icons/theme/light/clock.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/clock.svg");
}

.wui-icon-close {
  --wui-icon-image-light: url("../icons/theme/light/close.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/close.svg");
}

.wui-icon-cloud {
  --wui-icon-image-light: url("../icons/theme/light/cloud.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/cloud.svg");
}

.wui-icon-cloud-tools {
  --wui-icon-image-light: url("../icons/theme/light/cloud-tools.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/cloud-tools.svg");
}

.wui-icon-cog {
  --wui-icon-image-light: url("../icons/theme/light/cog.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/cog.svg");
}

.wui-icon-controller {
  --wui-icon-image-light: url("../icons/theme/light/controller.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/controller.svg");
}

.wui-icon-cup {
  --wui-icon-image-light: url("../icons/theme/light/cup.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/cup.svg");
}

.wui-icon-desktop {
  --wui-icon-image-light: url("../icons/theme/light/desktop.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/desktop.svg");
}

.wui-icon-doc {
  --wui-icon-image-light: url("../icons/theme/light/doc.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/doc.svg");
}

.wui-icon-envelope {
  --wui-icon-image-light: url("../icons/theme/light/envelope.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/envelope.svg");
}

.wui-icon-equaliser {
  --wui-icon-image-light: url("../icons/theme/light/equaliser.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/equaliser.svg");
}

.wui-icon-export {
  --wui-icon-image-light: url("../icons/theme/light/export.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/export.svg");
}

.wui-icon-eye {
  --wui-icon-image-light: url("../icons/theme/light/eye.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/eye.svg");
}

.wui-icon-flag {
  --wui-icon-image-light: url("../icons/theme/light/flag.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/flag.svg");
}

.wui-icon-flame {
  --wui-icon-image-light: url("../icons/theme/light/flame.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/flame.svg");
}

.wui-icon-flask {
  --wui-icon-image-light: url("../icons/theme/light/flask.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/flask.svg");
}

.wui-icon-gem {
  --wui-icon-image-light: url("../icons/theme/light/gem.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/gem.svg");
}

.wui-icon-gift {
  --wui-icon-image-light: url("../icons/theme/light/gift.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/gift.svg");
}

.wui-icon-graduation-cap {
  --wui-icon-image-light: url("../icons/theme/light/graduation-cap.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/graduation-cap.svg");
}

.wui-icon-graph-bar {
  --wui-icon-image-light: url("../icons/theme/light/graph-bar.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/graph-bar.svg");
}

.wui-icon-graph-pie {
  --wui-icon-image-light: url("../icons/theme/light/graph-pie.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/graph-pie.svg");
}

.wui-icon-graph-poly {
  --wui-icon-image-light: url("../icons/theme/light/graph-poly.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/graph-poly.svg");
}

.wui-icon-headphone {
  --wui-icon-image-light: url("../icons/theme/light/headphone.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/headphone.svg");
}

.wui-icon-heart {
  --wui-icon-image-light: url("../icons/theme/light/heart.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/heart.svg");
}

.wui-icon-home {
  --wui-icon-image-light: url("../icons/theme/light/home.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/home.svg");
}

.wui-icon-hotel {
  --wui-icon-image-light: url("../icons/theme/light/hotel.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/hotel.svg");
}

.wui-icon-hourglass {
  --wui-icon-image-light: url("../icons/theme/light/hourglass.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/hourglass.svg");
}

.wui-icon-image {
  --wui-icon-image-light: url("../icons/theme/light/image.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/image.svg");
}

.wui-icon-import {
  --wui-icon-image-light: url("../icons/theme/light/import.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/import.svg");
}

.wui-icon-industry {
  --wui-icon-image-light: url("../icons/theme/light/industry.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/industry.svg");
}

.wui-icon-infinity {
  --wui-icon-image-light: url("../icons/theme/light/infinity.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/infinity.svg");
}

.wui-icon-jar {
  --wui-icon-image-light: url("../icons/theme/light/jar.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/jar.svg");
}

.wui-icon-laptop {
  --wui-icon-image-light: url("../icons/theme/light/laptop.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/laptop.svg");
}

.wui-icon-layers {
  --wui-icon-image-light: url("../icons/theme/light/layers.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/layers.svg");
}

.wui-icon-lock {
  --wui-icon-image-light: url("../icons/theme/light/lock.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/lock.svg");
}

.wui-icon-map-marker {
  --wui-icon-image-light: url("../icons/theme/light/map-marker.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/map-marker.svg");
}

.wui-icon-menu {
  --wui-icon-image-light: url("../icons/theme/light/menu.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/menu.svg");
}

.wui-icon-message {
  --wui-icon-image-light: url("../icons/theme/light/message.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/message.svg");
}

.wui-icon-mobile {
  --wui-icon-image-light: url("../icons/theme/light/mobile.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/mobile.svg");
}

.wui-icon-moon {
  --wui-icon-image-light: url("../icons/theme/light/moon.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/moon.svg");
}

.wui-icon-move {
  --wui-icon-image-light: url("../icons/theme/light/move.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/move.svg");
}

.wui-icon-newspaper {
  --wui-icon-image-light: url("../icons/theme/light/newspaper.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/newspaper.svg");
}

.wui-icon-pen {
  --wui-icon-image-light: url("../icons/theme/light/pen.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/pen.svg");
}

.wui-icon-pencil {
  --wui-icon-image-light: url("../icons/theme/light/pencil.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/pencil.svg");
}

.wui-icon-processor {
  --wui-icon-image-light: url("../icons/theme/light/processor.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/processor.svg");
}

.wui-icon-refresh {
  --wui-icon-image-light: url("../icons/theme/light/refresh.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/refresh.svg");
}

.wui-icon-rocket {
  --wui-icon-image-light: url("../icons/theme/light/rocket.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/rocket.svg");
}

.wui-icon-search {
  --wui-icon-image-light: url("../icons/theme/light/search.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/search.svg");
}

.wui-icon-search-disabled {
  --wui-icon-image-light: url("../icons/theme/light/search-disabled.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/search-disabled.svg");
}

.wui-icon-server {
  --wui-icon-image-light: url("../icons/theme/light/server.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/server.svg");
}

.wui-icon-share {
  --wui-icon-image-light: url("../icons/theme/light/share.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/share.svg");
}

.wui-icon-shield {
  --wui-icon-image-light: url("../icons/theme/light/shield.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/shield.svg");
}

.wui-icon-shop {
  --wui-icon-image-light: url("../icons/theme/light/shop.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/shop.svg");
}

.wui-icon-star {
  --wui-icon-image-light: url("../icons/theme/light/star.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/star.svg");
}

.wui-icon-sun {
  --wui-icon-image-light: url("../icons/theme/light/sun.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/sun.svg");
}

.wui-icon-switch-off {
  --wui-icon-image-light: url("../icons/theme/light/switch-off.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/switch-off.svg");
}

.wui-icon-switch-on {
  --wui-icon-image-light: url("../icons/theme/light/switch-on.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/switch-on.svg");
}

.wui-icon-tablet {
  --wui-icon-image-light: url("../icons/theme/light/tablet.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/tablet.svg");
}

.wui-icon-tag {
  --wui-icon-image-light: url("../icons/theme/light/tag.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/tag.svg");
}

.wui-icon-tee {
  --wui-icon-image-light: url("../icons/theme/light/tee.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/tee.svg");
}

.wui-icon-thunder {
  --wui-icon-image-light: url("../icons/theme/light/thunder.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/thunder.svg");
}

.wui-icon-ticket {
  --wui-icon-image-light: url("../icons/theme/light/ticket.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/ticket.svg");
}

.wui-icon-trash {
  --wui-icon-image-light: url("../icons/theme/light/trash.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/trash.svg");
}

.wui-icon-user {
  --wui-icon-image-light: url("../icons/theme/light/user.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/user.svg");
}

.wui-icon-van {
  --wui-icon-image-light: url("../icons/theme/light/van.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/van.svg");
}

.wui-icon-vr {
  --wui-icon-image-light: url("../icons/theme/light/vr.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/vr.svg");
}

.wui-icon-website {
  --wui-icon-image-light: url("../icons/theme/light/website.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/website.svg");
}

.wui-icon-wrench {
  --wui-icon-image-light: url("../icons/theme/light/wrench.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/wrench.svg");
}

.wui-icon-zoom-in {
  --wui-icon-image-light: url("../icons/theme/light/zoom-in.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/zoom-in.svg");
}

.wui-icon-zoom-out {
  --wui-icon-image-light: url("../icons/theme/light/zoom-out.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/zoom-out.svg");
}

.wui-icon-fullscreen {
  --wui-icon-image-light: url("../icons/theme/light/zoom-in.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/zoom-in.svg");
}

.wui-icon-fullscreen-exit {
  --wui-icon-image-light: url("../icons/theme/light/zoom-out.svg");
  --wui-icon-image-dark: url("../icons/theme/dark/zoom-out.svg");
}

html[data-theme="light"] .wui-icon {
  --wui-icon-image-current: var(--wui-icon-image-light);
}

html[data-theme="dark"] .wui-icon {
  --wui-icon-image-current: var(--wui-icon-image-dark);
}

/* WUI ICON THEME ADAPTATION — GENERATED END */
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 27 — Yardımcı sınıflar
   ========================================================================== */
/* WUI SECTION: utilities */
/* =========================================================
YARDIMCI SINIFLAR
========================================================= */
/* Single-purpose utilities. */
.wui-muted {
  color: var(--wui-text-tertiary);
}

.wui-flex {
  display: flex;
}

.wui-items-center {
  align-items: center;
}

.wui-between {
  justify-content: space-between;
}

.wui-gap-1 {
  gap: var(--wui-space-2);
}

.wui-gap-2 {
  gap: var(--wui-space-4);
}

.wui-mt-1 {
  margin-top: var(--wui-space-2);
}

.wui-mt-2 {
  margin-top: var(--wui-space-4);
}

.wui-mb-0 {
  margin-bottom: 0;
}

.wui-mb-2 {
  margin-bottom: var(--wui-space-4);
}

.wui-w-full {
  width: 100%;
}

.wui-w-auto {
  width: auto;
}

.wui-auth-wide {
  width: min(760px, 100%);
}
/* WUI END SECTION */

/* ==========================================================================
   BÖLÜM 28 — Son responsive hedef düzenlemeleri
   ========================================================================== */
/* WUI SECTION: responsive-overrides */
@media (max-width: 820px) {
  .pos-product-stock, .pos-product-media-badge, .chat-conversation-meta, .chat-unread, .chat-detail-row span {
    font-size: var(--wui-font-xs-plus);
  }
  .chat-bubble-meta {
    font-size: var(--wui-font-xs);
  }
  .wui-topbar-control, .wui-notification-button, .wui-user-menu-trigger, .wui-toast-close, .wui-table-action {
    min-width: var(--wui-hit-target-mobile);
    min-height: var(--wui-hit-target-mobile);
  }
  .wui-btn-sm, .wui-link-button, .wui-check, .chat-filter-button, .wui-date-picker-head button, .wui-picker-actions button, .wui-date-grid button, .wui-time-option, .wui-sort-button, .wui-range {
    min-height: var(--wui-hit-target-mobile);
  }
}
/* WUI END SECTION */