/* ===================================================================
   irsaliye Pro — Birlestirilmis stylesheet
   index.html'den ekstrakte edildi (4 ayri <style> bloku)
   =================================================================== */

/* === BLOCK 1: Ana sayfa stilleri (eski 762-7757) === */
:root {
  /* ===== MODERN FLAT DESIGN SYSTEM - MOBILE OPTIMIZED ===== */

  /* ===== SPACING SYSTEM (8px base) ===== */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* ===== SMOOTH TRANSITIONS (150-300ms) ===== */
  --transition-fast:150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:200ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:300ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring:400ms cubic-bezier(0.34,1.56,0.64,1);

  /* ===== Z-INDEX SCALE ===== */
  --z-base:1;
  --z-dropdown:10;
  --z-sticky:20;
  --z-overlay:50;
  --z-modal:100;
  --z-toast:200;
  --z-lightbox:300;
  --z-max:400;

  /* ===== TYPOGRAPHY SYSTEM ===== */
  --font-body:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code','Courier New',monospace;
  --font-serif:'Instrument Serif',Georgia,serif;

  /* ===== EASING FUNCTIONS ===== */
  --ease-smooth:cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

  /* ===== DYNAMIC COLORS ===== */
  --kpi-color:var(--primary);

  /* ===== FLAT DESIGN - NO HEAVY SHADOWS ===== */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.5);
  --shadow-md:0 4px 8px rgba(0,0,0,0.6);
  --shadow-card:0 2px 8px rgba(0,0,0,0.5);
  --shadow-card-hover:0 4px 12px rgba(124,58,237,0.3);

  /* ===== BORDER RADIUS (FLAT STYLE) ===== */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:9999px;

  /* ===== DEFAULT THEME: MIDNIGHT (Deep Purple & Dark) ===== */
  --primary:#7c3aed;
  --primary-light:#a78bfa;
  --primary-dark:#5b21b6;
  --primary-glow:rgba(124,58,237,0.35);

  --accent:#c084fc;
  --accent-light:#d8b4fe;
  --accent-dark:#a78bfa;

  --bg-main:#0b0713;
  --bg-card:#160f28;
  --bg-card-hover:#231740;
  --bg-sidebar:#160f28;
  --bg-input:#160f28;

  --text-main:#f1f0f5;
  --text-muted:#c4b5fd;
  --text-dim:#a78bfa;

  --border:#2d2145;
  --border-solid:#3b2a5f;

  --success:#10b981;
  --success-light:#34d399;
  --success-dark:#059669;

  --danger:#ef4444;
  --danger-light:#f87171;
  --danger-dark:#dc2626;

  --warning:#fbbf24;
  --warning-light:#fcd34d;
  --warning-dark:#f59e0b;

  --info:#60a5fa;
  --info-light:#93c5fd;
  --info-dark:#3b82f6;

  /* ===== GLASSMORPHISM EFFECTS ===== */
  --glass:rgba(124,58,237,0.12);
  --glass-border:rgba(124,58,237,0.25);
  --glass-blur:12px;
}

/* ═══════════════ DARK MODE THEME ═══════════════ */
[data-theme="dark"] {
  --primary:#475569;
  --primary-light:#64748b;
  --primary-dark:#334155;
  --primary-glow:rgba(71,85,105,0.2);

  --accent:#10b981;
  --accent-light:#34d399;
  --accent-dark:#059669;

  --bg-main:#0f172a;
  --bg-card:#1e293b;
  --bg-card-hover:#334155;
  --bg-sidebar:#1e293b;
  --bg-input:#1e293b;

  --text-main:#f1f5f9;
  --text-muted:#94a3b8;
  --text-dim:#64748b;

  --border:#334155;
  --border-solid:#475569;

  --glass:rgba(30,41,59,0.7);
  --glass-border:rgba(71,85,105,0.3);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* ═══════════════ ADDITIONAL THEMES ═══════════════ */

/* Warm Theme */
[data-theme="warm"] {
  --primary:#ea580c;
  --primary-light:#fb923c;
  --primary-dark:#c2410c;
  --primary-glow:rgba(234,88,12,0.25);

  --accent:#f59e0b;

  --bg-main:#1c0a05;
  --bg-card:#2d1410;
  --bg-card-hover:#3d1a15;
  --bg-sidebar:#2d1410;
  --bg-input:#2d1410;

  --text-main:#fef3c7;
  --text-muted:#fdba74;
  --text-dim:#fb923c;

  --border:#451a03;
  --border-solid:#78350f;

  --glass:rgba(234,88,12,0.1);
  --glass-border:rgba(234,88,12,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Ocean Theme */
[data-theme="ocean"] {
  --primary:#0891b2;
  --primary-light:#22d3ee;
  --primary-dark:#0e7490;
  --primary-glow:rgba(8,145,178,0.25);

  --accent:#06b6d4;

  --bg-main:#082f49;
  --bg-card:#0c4a6e;
  --bg-card-hover:#075985;
  --bg-sidebar:#0c4a6e;
  --bg-input:#0c4a6e;

  --text-main:#e0f2fe;
  --text-muted:#7dd3fc;
  --text-dim:#38bdf8;

  --border:#164e63;
  --border-solid:#155e75;

  --glass:rgba(8,145,178,0.1);
  --glass-border:rgba(8,145,178,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Jade Theme */
[data-theme="jade"] {
  --primary:#059669;
  --primary-light:#10b981;
  --primary-dark:#047857;
  --primary-glow:rgba(5,150,105,0.25);

  --accent:#34d399;

  --bg-main:#064e3b;
  --bg-card:#065f46;
  --bg-card-hover:#047857;
  --bg-sidebar:#065f46;
  --bg-input:#065f46;

  --text-main:#d1fae5;
  --text-muted:#6ee7b7;
  --text-dim:#34d399;

  --border:#14532d;
  --border-solid:#166534;

  --glass:rgba(5,150,105,0.1);
  --glass-border:rgba(5,150,105,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Light Theme */
[data-theme="light"] {
  --primary:#334155;
  --primary-light:#475569;
  --primary-dark:#1e293b;
  --primary-glow:rgba(51,65,85,0.15);

  --accent:#059669;

  --bg-main:#f8fafc;
  --bg-card:#ffffff;
  --bg-card-hover:#f1f5f9;
  --bg-sidebar:#ffffff;
  --bg-input:#f8fafc;

  --text-main:#0f172a;
  --text-muted:#64748b;
  --text-dim:#94a3b8;

  --border:#e2e8f0;
  --border-solid:#cbd5e1;

  --glass:rgba(255,255,255,0.7);
  --glass-border:rgba(255,255,255,0.8);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.06);
  --shadow-md:0 4px 8px rgba(0,0,0,0.08);
  --shadow-card:0 2px 8px rgba(0,0,0,0.08);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.12);
}

/* ═══════════════ PREMIUM THEMES ═══════════════ */

/* Midnight (Purple Night) - Deep Purple & Dark */
[data-theme="midnight"]{
  --primary:#7c3aed;
  --primary-light:#a78bfa;
  --primary-dark:#5b21b6;
  --primary-glow:rgba(124,58,237,0.35);

  --accent:#c084fc;

  --bg-main:#0b0713;
  --bg-card:#160f28;
  --bg-card-hover:#231740;
  --bg-sidebar:#160f28;
  --bg-input:#160f28;

  --text-main:#f1f0f5;
  --text-muted:#c4b5fd;
  --text-dim:#a78bfa;

  --border:#2d2145;
  --border-solid:#3b2a5f;

  --glass:rgba(124,58,237,0.12);
  --glass-border:rgba(124,58,237,0.25);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.5);
  --shadow-md:0 4px 8px rgba(0,0,0,0.6);
  --shadow-card:0 2px 8px rgba(0,0,0,0.5);
  --shadow-card-hover:0 4px 12px rgba(124,58,237,0.3);
}
/* Rose Theme */
[data-theme="rose"]{
  --primary:#e11d48;
  --primary-light:#fb7185;
  --primary-dark:#be123c;
  --primary-glow:rgba(225,29,72,0.3);

  --accent:#f472b6;

  --bg-main:#1f0a13;
  --bg-card:#2d1420;
  --bg-card-hover:#3d1a2a;
  --bg-sidebar:#2d1420;
  --bg-input:#2d1420;

  --text-main:#fce7f3;
  --text-muted:#fda4af;
  --text-dim:#fb7185;

  --border:#4c0519;
  --border-solid:#881337;

  --glass:rgba(225,29,72,0.1);
  --glass-border:rgba(225,29,72,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Cyber Theme */
[data-theme="cyber"]{
  --primary:#00ffcc;
  --primary-light:#5eead4;
  --primary-dark:#00b894;
  --primary-glow:rgba(0,255,204,0.3);

  --accent:#ff00aa;

  --bg-main:#030712;
  --bg-card:#0a141c;
  --bg-card-hover:#132028;
  --bg-sidebar:#0a141c;
  --bg-input:#0a141c;

  --text-main:#ccfbf1;
  --text-muted:#5eead4;
  --text-dim:#2dd4bf;

  --border:#134e4a;
  --border-solid:#115e59;

  --glass:rgba(0,255,204,0.1);
  --glass-border:rgba(0,255,204,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Sunset Theme */
[data-theme="sunset"]{
  --primary:#f97316;
  --primary-light:#fb923c;
  --primary-dark:#c2410c;
  --primary-glow:rgba(249,115,22,0.3);

  --accent:#ec4899;

  --bg-main:#1f0a0a;
  --bg-card:#2d1410;
  --bg-card-hover:#3d1a15;
  --bg-sidebar:#2d1410;
  --bg-input:#2d1410;

  --text-main:#fed7aa;
  --text-muted:#fdba74;
  --text-dim:#fb923c;

  --border:#431407;
  --border-solid:#7c2d12;

  --glass:rgba(249,115,22,0.1);
  --glass-border:rgba(249,115,22,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Forest Theme */
[data-theme="forest"]{
  --primary:#84cc16;
  --primary-light:#a3e635;
  --primary-dark:#65a30d;
  --primary-glow:rgba(132,204,22,0.3);

  --accent:#bef264;

  --bg-main:#14120a;
  --bg-card:#1f1e14;
  --bg-card-hover:#2a2820;
  --bg-sidebar:#1f1e14;
  --bg-input:#1f1e14;

  --text-main:#ecfccb;
  --text-muted:#bef264;
  --text-dim:#a3e635;

  --border:#365314;
  --border-solid:#4d7c0f;

  --glass:rgba(132,204,22,0.1);
  --glass-border:rgba(132,204,22,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Dracula Theme */
[data-theme="dracula"]{
  --primary:#bd93f9;
  --primary-light:#caa9fa;
  --primary-dark:#8b5cf6;
  --primary-glow:rgba(189,147,249,0.3);

  --accent:#ff79c6;

  --bg-main:#1e1f29;
  --bg-card:#282a36;
  --bg-card-hover:#353746;
  --bg-sidebar:#282a36;
  --bg-input:#282a36;

  --text-main:#f8f8f2;
  --text-muted:#bd93f9;
  --text-dim:#8b5cf6;

  --border:#44475a;
  --border-solid:#6272a4;

  --glass:rgba(189,147,249,0.1);
  --glass-border:rgba(189,147,249,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Nord Theme */
[data-theme="nord"]{
  --primary:#88c0d0;
  --primary-light:#8fbcbb;
  --primary-dark:#5e81ac;
  --primary-glow:rgba(136,192,208,0.3);

  --accent:#81a1c1;

  --bg-main:#2e3440;
  --bg-card:#3b4252;
  --bg-card-hover:#434c5e;
  --bg-sidebar:#3b4252;
  --bg-input:#3b4252;

  --text-main:#eceff4;
  --text-muted:#d8dee9;
  --text-dim:#81a1c1;

  --border:#4c566a;
  --border-solid:#5e81ac;

  --glass:rgba(136,192,208,0.1);
  --glass-border:rgba(136,192,208,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Obsidian Theme */
[data-theme="obsidian"]{
  --primary:#fbbf24;
  --primary-light:#fcd34d;
  --primary-dark:#d97706;
  --primary-glow:rgba(251,191,36,0.3);

  --accent:#f59e0b;

  --bg-main:#000000;
  --bg-card:#0a0a0a;
  --bg-card-hover:#161616;
  --bg-sidebar:#0a0a0a;
  --bg-input:#0a0a0a;

  --text-main:#fef3c7;
  --text-muted:#fcd34d;
  --text-dim:#fbbf24;

  --border:#1f1f1f;
  --border-solid:#292524;

  --glass:rgba(251,191,36,0.1);
  --glass-border:rgba(251,191,36,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Galaxy Theme */
[data-theme="galaxy"]{
  --primary:#a855f7;
  --primary-light:#c084fc;
  --primary-dark:#7e22ce;
  --primary-glow:rgba(168,85,247,0.3);

  --accent:#06b6d4;

  --bg-main:#0a0415;
  --bg-card:#1a0d33;
  --bg-card-hover:#2a1449;
  --bg-sidebar:#1a0d33;
  --bg-input:#1a0d33;

  --text-main:#f3e8ff;
  --text-muted:#d8b4fe;
  --text-dim:#c084fc;

  --border:#3b0764;
  --border-solid:#581c87;

  --glass:rgba(168,85,247,0.1);
  --glass-border:rgba(168,85,247,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* ═══════════════ LIGHT THEMES ═══════════════ */

/* Cream Theme */
[data-theme="cream"]{
  --primary:#b45309;
  --primary-light:#d97706;
  --primary-dark:#92400e;
  --primary-glow:rgba(180,83,9,0.2);

  --accent:#ea580c;

  --bg-main:#fdf6e3;
  --bg-card:#fffcf0;
  --bg-card-hover:#faf0d4;
  --bg-sidebar:#fffcf0;
  --bg-input:#fdf6e3;

  --text-main:#3e2e14;
  --text-muted:#78603d;
  --text-dim:#a08258;

  --border:#f0e4c8;
  --border-solid:#e7d5b0;

  --glass:rgba(255,250,230,0.7);
  --glass-border:rgba(180,83,9,0.15);

  --shadow-xs:0 1px 2px rgba(120,70,20,0.08);
  --shadow-sm:0 2px 4px rgba(120,70,20,0.1);
  --shadow-md:0 4px 8px rgba(120,70,20,0.12);
  --shadow-card:0 2px 8px rgba(120,70,20,0.1);
  --shadow-card-hover:0 4px 12px rgba(120,70,20,0.15);
}

/* Mint Theme */
[data-theme="mint"]{
  --primary:#0d9488;
  --primary-light:#14b8a6;
  --primary-dark:#0f766e;
  --primary-glow:rgba(13,148,136,0.2);

  --accent:#10b981;

  --bg-main:#ecfdf5;
  --bg-card:#ffffff;
  --bg-card-hover:#d1fae5;
  --bg-sidebar:#ffffff;
  --bg-input:#ecfdf5;

  --text-main:#064e3b;
  --text-muted:#5b7c71;
  --text-dim:#95a99e;

  --border:#d1fae5;
  --border-solid:#a7f3d0;

  --glass:rgba(220,255,240,0.7);
  --glass-border:rgba(13,148,136,0.15);

  --shadow-xs:0 1px 2px rgba(13,148,136,0.08);
  --shadow-sm:0 2px 4px rgba(13,148,136,0.1);
  --shadow-md:0 4px 8px rgba(13,148,136,0.12);
  --shadow-card:0 2px 8px rgba(13,148,136,0.1);
  --shadow-card-hover:0 4px 12px rgba(13,148,136,0.15);
}

/* Sky Theme */
[data-theme="sky"]{
  --primary:#0284c7;
  --primary-light:#38bdf8;
  --primary-dark:#0369a1;
  --primary-glow:rgba(2,132,199,0.2);

  --accent:#0ea5e9;

  --bg-main:#f0f9ff;
  --bg-card:#ffffff;
  --bg-card-hover:#e0f2fe;
  --bg-sidebar:#ffffff;
  --bg-input:#f0f9ff;

  --text-main:#0c4a6e;
  --text-muted:#5a7690;
  --text-dim:#93a8b8;

  --border:#bae6fd;
  --border-solid:#7dd3fc;

  --glass:rgba(220,240,255,0.7);
  --glass-border:rgba(2,132,199,0.15);

  --shadow-xs:0 1px 2px rgba(2,132,199,0.08);
  --shadow-sm:0 2px 4px rgba(2,132,199,0.1);
  --shadow-md:0 4px 8px rgba(2,132,199,0.12);
  --shadow-card:0 2px 8px rgba(2,132,199,0.1);
  --shadow-card-hover:0 4px 12px rgba(2,132,199,0.15);
}

/* Blossom Theme */
[data-theme="blossom"]{
  --primary:#db2777;
  --primary-light:#ec4899;
  --primary-dark:#be185d;
  --primary-glow:rgba(219,39,119,0.2);

  --accent:#f472b6;

  --bg-main:#fdf2f8;
  --bg-card:#ffffff;
  --bg-card-hover:#fce7f3;
  --bg-sidebar:#ffffff;
  --bg-input:#fdf2f8;

  --text-main:#500724;
  --text-muted:#7c5068;
  --text-dim:#a88699;

  --border:#fbcfe8;
  --border-solid:#f9a8d4;

  --glass:rgba(255,230,240,0.7);
  --glass-border:rgba(219,39,119,0.15);

  --shadow-xs:0 1px 2px rgba(219,39,119,0.08);
  --shadow-sm:0 2px 4px rgba(219,39,119,0.1);
  --shadow-md:0 4px 8px rgba(219,39,119,0.12);
  --shadow-card:0 2px 8px rgba(219,39,119,0.1);
  --shadow-card-hover:0 4px 12px rgba(219,39,119,0.15);
}

/* Paper Theme */
[data-theme="paper"]{
  --primary:#1f2937;
  --primary-light:#374151;
  --primary-dark:#111827;
  --primary-glow:rgba(31,41,55,0.15);

  --accent:#dc2626;

  --bg-main:#f5f5f4;
  --bg-card:#ffffff;
  --bg-card-hover:#f5f5f4;
  --bg-sidebar:#ffffff;
  --bg-input:#f5f5f4;

  --text-main:#1c1917;
  --text-muted:#57534e;
  --text-dim:#a8a29e;

  --border:#e7e5e4;
  --border-solid:#d6d3d1;

  --glass:rgba(255,255,255,0.7);
  --glass-border:rgba(0,0,0,0.08);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.06);
  --shadow-md:0 4px 8px rgba(0,0,0,0.08);
  --shadow-card:0 2px 8px rgba(0,0,0,0.06);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.1);
}

/* Lavender Theme */
[data-theme="lavender"]{
  --primary:#8b5cf6;
  --primary-light:#a78bfa;
  --primary-dark:#6d28d9;
  --primary-glow:rgba(139,92,246,0.2);

  --accent:#c084fc;

  --bg-main:#f5f3ff;
  --bg-card:#ffffff;
  --bg-card-hover:#ede9fe;
  --bg-sidebar:#ffffff;
  --bg-input:#f5f3ff;

  --text-main:#2e1065;
  --text-muted:#6b5b8f;
  --text-dim:#9c93b6;

  --border:#ddd6fe;
  --border-solid:#c4b5fd;

  --glass:rgba(240,235,255,0.7);
  --glass-border:rgba(139,92,246,0.15);

  --shadow-xs:0 1px 2px rgba(139,92,246,0.08);
  --shadow-sm:0 2px 4px rgba(139,92,246,0.1);
  --shadow-md:0 4px 8px rgba(139,92,246,0.12);
  --shadow-card:0 2px 8px rgba(139,92,246,0.1);
  --shadow-card-hover:0 4px 12px rgba(139,92,246,0.15);
}

/* Corporate Theme */
[data-theme="corporate"]{
  --primary:#1e40af;
  --primary-light:#3b82f6;
  --primary-dark:#1e3a8a;
  --primary-glow:rgba(30,64,175,0.2);

  --accent:#2563eb;

  --bg-main:#f8fafc;
  --bg-card:#ffffff;
  --bg-card-hover:#f1f5f9;
  --bg-sidebar:#ffffff;
  --bg-input:#f8fafc;

  --text-main:#0f172a;
  --text-muted:#475569;
  --text-dim:#94a3b8;

  --border:#e2e8f0;
  --border-solid:#cbd5e1;

  --glass:rgba(255,255,255,0.7);
  --glass-border:rgba(30,64,175,0.1);

  --shadow-xs:0 1px 2px rgba(30,64,175,0.06);
  --shadow-sm:0 2px 4px rgba(30,64,175,0.08);
  --shadow-md:0 4px 8px rgba(30,64,175,0.1);
  --shadow-card:0 2px 8px rgba(30,64,175,0.08);
  --shadow-card-hover:0 4px 12px rgba(30,64,175,0.12);
}

/* Slate Theme */
[data-theme="slate"]{
  --primary:#64748b;
  --primary-light:#94a3b8;
  --primary-dark:#475569;
  --primary-glow:rgba(100,116,139,0.2);

  --accent:#cbd5e1;

  --bg-main:#0f172a;
  --bg-card:#1e293b;
  --bg-card-hover:#334155;
  --bg-sidebar:#1e293b;
  --bg-input:#1e293b;

  --text-main:#f1f5f9;
  --text-muted:#cbd5e1;
  --text-dim:#94a3b8;

  --border:#334155;
  --border-solid:#475569;

  --glass:rgba(100,116,139,0.1);
  --glass-border:rgba(100,116,139,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Emerald Theme */
[data-theme="emerald"]{
  --primary:#059669;
  --primary-light:#10b981;
  --primary-dark:#047857;
  --primary-glow:rgba(5,150,105,0.25);

  --accent:#34d399;

  --bg-main:#064e3b;
  --bg-card:#065f46;
  --bg-card-hover:#047857;
  --bg-sidebar:#065f46;
  --bg-input:#065f46;

  --text-main:#d1fae5;
  --text-muted:#a7f3d0;
  --text-dim:#6ee7b7;

  --border:#14532d;
  --border-solid:#166534;

  --glass:rgba(5,150,105,0.1);
  --glass-border:rgba(5,150,105,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Ruby Theme */
[data-theme="ruby"]{
  --primary:#dc2626;
  --primary-light:#ef4444;
  --primary-dark:#b91c1c;
  --primary-glow:rgba(220,38,38,0.25);

  --accent:#f87171;

  --bg-main:#450a0a;
  --bg-card:#7f1d1d;
  --bg-card-hover:#991b1b;
  --bg-sidebar:#7f1d1d;
  --bg-input:#7f1d1d;

  --text-main:#fecaca;
  --text-muted:#fca5a5;
  --text-dim:#f87171;

  --border:#7f1d1d;
  --border-solid:#991b1b;

  --glass:rgba(220,38,38,0.1);
  --glass-border:rgba(220,38,38,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Amber Theme */
[data-theme="amber"]{
  --primary:#d97706;
  --primary-light:#f59e0b;
  --primary-dark:#b45309;
  --primary-glow:rgba(217,119,6,0.25);

  --accent:#fbbf24;

  --bg-main:#451a03;
  --bg-card:#78350f;
  --bg-card-hover:#92400e;
  --bg-sidebar:#78350f;
  --bg-input:#78350f;

  --text-main:#fef3c7;
  --text-muted:#fde68a;
  --text-dim:#fcd34d;

  --border:#78350f;
  --border-solid:#92400e;

  --glass:rgba(217,119,6,0.1);
  --glass-border:rgba(217,119,6,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Sapphire Theme */
[data-theme="sapphire"]{
  --primary:#0ea5e9;
  --primary-light:#38bdf8;
  --primary-dark:#0284c7;
  --primary-glow:rgba(14,165,233,0.25);

  --accent:#22d3ee;

  --bg-main:#082f49;
  --bg-card:#0c4a6e;
  --bg-card-hover:#075985;
  --bg-sidebar:#0c4a6e;
  --bg-input:#0c4a6e;

  --text-main:#e0f2fe;
  --text-muted:#bae6fd;
  --text-dim:#7dd3fc;

  --border:#164e63;
  --border-solid:#155e75;

  --glass:rgba(14,165,233,0.1);
  --glass-border:rgba(14,165,233,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Monochrome Theme */
[data-theme="monochrome"]{
  --primary:#18181b;
  --primary-light:#3f3f46;
  --primary-dark:#09090b;
  --primary-glow:rgba(24,24,27,0.2);

  --accent:#52525b;

  --bg-main:#fafafa;
  --bg-card:#ffffff;
  --bg-card-hover:#f4f4f5;
  --bg-sidebar:#ffffff;
  --bg-input:#fafafa;

  --text-main:#18181b;
  --text-muted:#52525b;
  --text-dim:#a1a1aa;

  --border:#e4e4e7;
  --border-solid:#d4d4d8;

  --glass:rgba(255,255,255,0.7);
  --glass-border:rgba(24,24,27,0.1);

  --shadow-xs:0 1px 2px rgba(24,24,27,0.06);
  --shadow-sm:0 2px 4px rgba(24,24,27,0.08);
  --shadow-md:0 4px 8px rgba(24,24,27,0.1);
  --shadow-card:0 2px 8px rgba(24,24,27,0.08);
  --shadow-card-hover:0 4px 12px rgba(24,24,27,0.12);
}

/* Neon Theme */
[data-theme="neon"]{
  --primary:#a855f7;
  --primary-light:#c084fc;
  --primary-dark:#9333ea;
  --primary-glow:rgba(168,85,247,0.35);

  --accent:#d946ef;

  --bg-main:#0a0014;
  --bg-card:#1a0028;
  --bg-card-hover:#2a0040;
  --bg-sidebar:#1a0028;
  --bg-input:#1a0028;

  --text-main:#faf5ff;
  --text-muted:#e9d5ff;
  --text-dim:#d8b4fe;

  --border:#3b0764;
  --border-solid:#581c87;

  --glass:rgba(168,85,247,0.1);
  --glass-border:rgba(168,85,247,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* Arctic Theme */
[data-theme="arctic"]{
  --primary:#06b6d4;
  --primary-light:#22d3ee;
  --primary-dark:#0891b2;
  --primary-glow:rgba(6,182,212,0.2);

  --accent:#14b8a6;

  --bg-main:#ecfeff;
  --bg-card:#ffffff;
  --bg-card-hover:#cffafe;
  --bg-sidebar:#ffffff;
  --bg-input:#ecfeff;

  --text-main:#083344;
  --text-muted:#155e75;
  --text-dim:#0e7490;

  --border:#a5f3fc;
  --border-solid:#67e8f9;

  --glass:rgba(255,255,255,0.7);
  --glass-border:rgba(6,182,212,0.15);

  --shadow-xs:0 1px 2px rgba(6,182,212,0.08);
  --shadow-sm:0 2px 4px rgba(6,182,212,0.1);
  --shadow-md:0 4px 8px rgba(6,182,212,0.12);
  --shadow-card:0 2px 8px rgba(6,182,212,0.1);
  --shadow-card-hover:0 4px 12px rgba(6,182,212,0.15);
}

/* Volcano Theme */
[data-theme="volcano"]{
  --primary:#ea580c;
  --primary-light:#f97316;
  --primary-dark:#c2410c;
  --primary-glow:rgba(234,88,12,0.3);

  --accent:#fb923c;

  --bg-main:#1c0a05;
  --bg-card:#431407;
  --bg-card-hover:#7c2d12;
  --bg-sidebar:#431407;
  --bg-input:#431407;

  --text-main:#fed7aa;
  --text-muted:#fdba74;
  --text-dim:#fb923c;

  --border:#7c2d12;
  --border-solid:#9a3412;

  --glass:rgba(234,88,12,0.1);
  --glass-border:rgba(234,88,12,0.2);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.5);
  --shadow-card:0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,0.5);
}

/* ═══════════════ V9 ENHANCED THEME SELECTOR ═══════════════ */
.v9-theme-cats{display:flex;gap:6px;padding:4px;background:var(--glass);border:1px solid var(--border);border-radius:14px;margin-bottom:18px;flex-wrap:wrap;}
.v9-theme-cat{flex:1;min-width:90px;padding:9px 14px;border-radius:10px;background:transparent;border:none;color:var(--text-muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:all 0.25s;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;}
.v9-theme-cat:hover{color:var(--text-main);background:var(--bg-card);}
.v9-theme-cat.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 2px 10px var(--primary-glow);}
.v9-theme-cat i{font-size:11px;}
.v9-theme-cat .cnt{font-size:10px;padding:1px 7px;border-radius:10px;background:rgba(255,255,255,0.18);font-weight:700;}
.v9-theme-cat:not(.active) .cnt{background:var(--glass);color:var(--text-dim);}

.v9-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;}
.v9-theme-card{position:relative;border-radius:14px;padding:0;cursor:pointer;border:2px solid var(--border);background:var(--bg-card);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);overflow:hidden;}
.v9-theme-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.v9-theme-card.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow),0 8px 20px rgba(0,0,0,0.18);}
.v9-theme-card.active::after{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;box-shadow:inset 0 0 0 1px var(--primary-glow);}

.v9-tc-hero{height:70px;position:relative;overflow:hidden;}
.v9-tc-hero::before{content:'';position:absolute;inset:0;background:var(--v9-grad);}
.v9-tc-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.25),transparent 60%),radial-gradient(circle at 70% 80%,rgba(0,0,0,0.25),transparent 60%);}
.v9-tc-dots{position:absolute;bottom:8px;left:10px;display:flex;gap:4px;z-index:1;}
.v9-tc-dot{width:8px;height:8px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,0.3);}
.v9-tc-body{padding:10px 12px 12px;}
.v9-tc-name{font-size:13px;font-weight:700;color:var(--text-main);letter-spacing:-0.1px;line-height:1.2;}
.v9-tc-desc{font-size:10.5px;color:var(--text-dim);margin-top:2px;font-weight:500;}
.v9-tc-check{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--primary);font-size:10px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.6);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
.v9-theme-card.active .v9-tc-check{opacity:1;transform:scale(1);}

.v9-theme-card.mode-light .v9-tc-name{color:#1a1a2e;}
.v9-theme-card.mode-light .v9-tc-desc{color:#6b7280;}
.v9-theme-card.mode-light{background:#ffffff;}

/* Shake animation on theme change */
@keyframes v9ThemeIn{0%{filter:blur(4px) brightness(1.2);}50%{filter:blur(2px) brightness(1.1);}100%{filter:blur(0) brightness(1);}}
body.v9-theme-changing{animation:v9ThemeIn 0.6s cubic-bezier(0.4,0,0.2,1);}

/* Mini indicator chip in topbar — shows current theme */
.v9-theme-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:20px;background:var(--glass);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all 0.2s;}
.v9-theme-chip:hover{border-color:var(--primary);color:var(--text-main);transform:translateY(-1px);}
.v9-theme-chip .v9-tcd{width:14px;height:14px;border-radius:50%;background:var(--v9-chip-grad,linear-gradient(135deg,var(--primary),var(--primary-dark)));box-shadow:0 0 0 2px var(--bg-card),0 0 0 3px var(--border);}
@media(max-width:640px){.v9-theme-chip .v9-label{display:none;}.v9-theme-chip{padding:5px 6px;}}

@media(max-width:640px){
  .v9-theme-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .v9-tc-hero{height:60px;}
  .v9-theme-cats{gap:4px;padding:3px;}
  .v9-theme-cat{min-width:0;padding:8px 10px;font-size:11.5px;}
  .v9-theme-cat .cnt{display:none;}
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}

/* ═══════════════ ULTRA-MODERN TYPOGRAPHY SYSTEM ═══════════════ */
body{
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  font-optical-sizing:auto;
  font-variation-settings:"slnt" 0;
  background:var(--bg-main);
  color:var(--text-main);
  min-height:100vh;
  min-height:100dvh;
  transition:background var(--transition-slow),color var(--transition-slow);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:16px;
  line-height:1.6;
  /* Touch optimization */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ═══════════════ SUBTLE GRADIENT BACKGROUND ═══════════════ */
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(ellipse at 20% 30%, var(--primary-glow) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(5,150,105,0.08) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
  opacity:0.4;
}

/* Remove noise texture for cleaner flat design */
body::after{
  display:none;
}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px;}

/* ===== SIDEBAR - MODERN FLAT DESIGN ===== */
.sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:260px;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  z-index:60;
  transition:transform var(--transition-slow);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  box-shadow:var(--shadow-md);
}
.sidebar.collapsed{transform:translateX(-260px);}

/* Logo Section */
.sidebar .logo{
  padding:var(--space-5);
  position:relative;
  border-bottom:1px solid var(--border);
}
.logo-inner{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.logo-icon{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  border-radius:var(--radius);
  background:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#fff;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-base);
}
.logo-icon:hover{
  transform:scale(1.05);
  box-shadow:var(--shadow-md);
}
.logo-text{
  font-weight:800;
  font-size:18px;
  color:var(--text-main);
  letter-spacing:-0.5px;
}
.logo-ver{
  font-size:11px;
  color:var(--text-dim);
  font-weight:500;
}

/* Navigation */
.sidebar nav{
  flex:1;
  padding:var(--space-3) var(--space-2);
  overflow-y:auto;
}

/* Section Headers */
.nav-section{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--text-dim);
  padding:var(--space-5) var(--space-3) var(--space-2);
  font-weight:700;
}
.nav-section:first-child{padding-top:var(--space-2);}

/* Navigation Links - Touch Optimized */
.sidebar nav a{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:12px var(--space-3);
  min-height:44px;
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:all var(--transition-base);
  margin-bottom:var(--space-1);
  cursor:pointer;
  position:relative;
  /* Touch optimization */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* Hover State */
.sidebar nav a:hover{
  color:var(--text-main);
  background:var(--bg-card-hover);
  transform:translateX(4px);
}

/* Active State */
.sidebar nav a.active{
  color:#fff;
  background:var(--primary);
  font-weight:600;
  box-shadow:var(--shadow-sm);
}
.sidebar nav a.active::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:60%;
  background:#fff;
  border-radius:0 3px 3px 0;
}

/* Touch Feedback */
.sidebar nav a:active{
  transform:scale(0.98);
}

/* Icons */
.sidebar nav a i{
  width:20px;
  min-width:20px;
  text-align:center;
  font-size:16px;
  transition:all var(--transition-base);
}
.sidebar nav a.active i{
  transform:scale(1.1);
}

/* Labels */
.sidebar nav a span{
  flex:1;
}

/* Badge/Counter */
.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:var(--radius-full);
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
}
.sidebar nav a:not(.active) .nav-badge{
  background:var(--text-dim);
}

/* Sidebar Footer */
.sidebar-footer{
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--text-muted);
}
.sidebar-footer .sf-row{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-1);
}
.sidebar-footer i{
  color:var(--primary);
  font-size:12px;
}

/* ===== SIDEBAR OVERLAY (Mobile) ===== */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  z-index:55;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity var(--transition-base);
  /* Touch optimization */
  touch-action:manipulation;
}
.sidebar-overlay.show{
  display:block;
  opacity:1;
}

/* ===== MAIN ===== */
.main{margin-left:260px;min-height:100vh;min-height:100dvh;position:relative;z-index:1;transition:margin 0.35s cubic-bezier(0.4,0,0.2,1);}

/* ===== TOPBAR - MODERN FLAT DESIGN ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  padding:var(--space-4) var(--space-6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-sm);
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:var(--space-4);
}

/* Hamburger Menu Button - Modern & Touch-Friendly */
.topbar .menu-btn{
  display:none;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border-radius:var(--radius-sm);
  background:var(--bg-card-hover);
  border:1px solid var(--border);
  color:var(--text-main);
  font-size:20px;
  cursor:pointer;
  transition:all var(--transition-base);
  position:relative;
  /* Touch optimization */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.topbar .menu-btn:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  transform:scale(1.05);
}
.topbar .menu-btn:active{
  transform:scale(0.95);
}

/* Animated Hamburger Icon */
.menu-btn-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:20px;
  height:20px;
}
.menu-btn-icon span{
  display:block;
  width:100%;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:all var(--transition-base);
}
.sidebar.open ~ .main .menu-btn .menu-btn-icon span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.sidebar.open ~ .main .menu-btn .menu-btn-icon span:nth-child(2){
  opacity:0;
  transform:translateX(-10px);
}
.sidebar.open ~ .main .menu-btn .menu-btn-icon span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.topbar .page-title{
  font-weight:700;
  font-size:20px;
  white-space:nowrap;
  letter-spacing:-0.3px;
  color:var(--text-main);
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.topbar-badge{
  background:var(--primary);
  color:#fff;
  font-size:12px;
  padding:6px 14px;
  border-radius:var(--radius-full);
  font-weight:600;
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-base);
}
.topbar-badge:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.topbar-avatar{
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
  color:#fff;
  box-shadow:0 2px 12px var(--primary-glow);
  cursor:pointer;
  transition:all var(--transition-base);
}
.topbar-avatar:hover{
  transform:scale(1.08) rotate(-3deg);
  box-shadow:0 4px 16px var(--primary-glow);
}

/* ===== CONTENT ===== */
.content{padding:20px 24px 100px;max-width:1400px;position:relative;overflow-y:auto;}

/* ===== PAGE TRANSITIONS ===== */
.page{display:none;}
.page.active{display:block;animation:pageIn 0.4s cubic-bezier(0.4,0,0.2,1);}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ===== STAT CARDS - ULTRA-MODERN 3D ===== */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:24px;
  perspective:1000px;
}
.stat-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  position:relative;
  overflow:hidden;
  transition:all var(--transition-base);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  cursor:pointer;
  box-shadow:var(--shadow-card);
  transform-style:preserve-3d;
  will-change:transform;
}
.stat-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--primary-glow),transparent);
  opacity:0;
  transition:opacity var(--transition-base);
  pointer-events:none;
}
.stat-card:hover{
  transform:translateY(-8px) translateZ(20px) rotateX(2deg);
  box-shadow:
    var(--shadow-card-hover),
    0 0 40px var(--primary-glow);
  border-color:var(--primary);
}
.stat-card:hover::after{opacity:1;}
.stat-card::before{
  content:'';
  position:absolute;
  top:-30px;
  right:-30px;
  width:100px;
  height:100px;
  border-radius:50%;
  opacity:0.06;
  transition:all var(--transition-slow);
  filter:blur(20px);
}
.stat-card:hover::before{
  transform:scale(1.4) translateZ(10px);
  opacity:0.15;
}
.stat-card:nth-child(1)::before{background:var(--primary);}
.stat-card:nth-child(2)::before{background:var(--success);}
.stat-card:nth-child(3)::before{background:var(--info);}
.stat-card:nth-child(4)::before{background:var(--warning);}
.stat-icon{
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  margin-bottom:12px;
  position:relative;
  z-index:1;
  transition:all var(--transition-bounce);
  transform-style:preserve-3d;
}
.stat-card:hover .stat-icon{
  transform:scale(1.15) rotate(-5deg) translateZ(15px);
  filter:drop-shadow(0 4px 12px var(--primary-glow));
}
.stat-value{
  font-size:30px;
  font-weight:800;
  line-height:1;
  letter-spacing:-1px;
  position:relative;
  z-index:1;
  transition:all var(--transition-base);
  transform-style:preserve-3d;
}
.stat-card:hover .stat-value{
  transform:translateZ(10px);
  text-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.stat-label{
  font-size:12.5px;
  color:var(--text-muted);
  margin-top:6px;
  font-weight:600;
  letter-spacing:0.2px;
  position:relative;
  z-index:1;
  transition:all var(--transition-base);
}
.stat-card:hover .stat-label{
  transform:translateZ(5px);
}
.stat-change{
  font-size:11px;
  font-weight:600;
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border-radius:20px;
  position:relative;
  z-index:1;
}
.stat-change.up{background:rgba(16,185,129,0.15);color:#10b981;box-shadow:0 2px 8px rgba(16,185,129,0.2);}
.stat-change.down{background:rgba(239,68,68,0.15);color:#ef4444;box-shadow:0 2px 8px rgba(239,68,68,0.2);}

/* ===== PREMIUM ENHANCEMENTS - GLOBAL ===== */

/* Enhanced Section Headers */
.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  gap:16px;
  flex-wrap:wrap;
  animation:fadeInDown 0.6s ease;
}

@keyframes fadeInDown{
  from{opacity:0;transform:translateY(-20px);}
  to{opacity:1;transform:translateY(0);}
}

.section-header h2{
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.5px;
  background:linear-gradient(135deg,var(--text-main),var(--primary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0;
}

.section-header p{
  font-size:14px;
  color:var(--text-muted);
  margin:4px 0 0 0;
  font-weight:500;
}

/* Enhanced Search Bar */
.search-bar{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--bg-card);
  border:2px solid var(--border);
  border-radius:12px;
  padding:0 16px;
  transition:all 0.3s ease;
  animation:fadeIn 0.6s ease 0.1s backwards;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.search-bar:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
  transform:translateY(-2px);
}

.search-bar i{
  color:var(--text-muted);
  font-size:16px;
  margin-right:12px;
  transition:all 0.3s ease;
}

.search-bar:focus-within i{
  color:var(--primary);
  transform:scale(1.1);
}

.search-bar input{
  flex:1;
  border:none;
  background:transparent;
  padding:14px 0;
  font-size:14px;
  color:var(--text-main);
  outline:none;
}

/* Enhanced Filter Row */
.filter-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
  animation:fadeIn 0.6s ease 0.2s backwards;
}

.filter-select{
  flex:1;
  min-width:180px;
  padding:12px 16px;
  border:2px solid var(--border);
  border-radius:10px;
  background:var(--bg-card);
  color:var(--text-main);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.3s ease;
}

.filter-select:hover{
  border-color:var(--primary);
  background:var(--bg-card-hover);
  transform:translateY(-2px);
}

.filter-select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}

/* Enhanced Export Bar */
.export-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
  animation:fadeIn 0.6s ease 0.3s backwards;
}

.export-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  border:none;
  cursor:pointer;
  background:var(--bg-card);
  color:var(--text-main);
  border:1px solid var(--border);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}

.export-btn::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  transform:translate(-50%,-50%);
  transition:width 0.6s,height 0.6s;
}

.export-btn:hover::before{
  width:300px;
  height:300px;
}

.export-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  border-color:var(--primary);
}

/* Enhanced Cards */
.card{
  animation:fadeInUp 0.6s ease backwards;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

.card:nth-child(1){animation-delay:0.1s;}
.card:nth-child(2){animation-delay:0.2s;}
.card:nth-child(3){animation-delay:0.3s;}
.card:nth-child(4){animation-delay:0.4s;}

/* Enhanced Stats Grid */
.stats-grid{
  animation:fadeIn 0.6s ease 0.2s backwards;
}

.stat-card{
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor:pointer;
}

.stat-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 12px 32px rgba(0,0,0,0.15);
}

.stat-icon{
  transition:all 0.3s ease;
}

.stat-card:hover .stat-icon{
  transform:scale(1.1) rotate(5deg);
}

/* Enhanced Type Filter Bar */
.type-filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  animation:fadeIn 0.6s ease 0.25s backwards;
}

.type-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  background:var(--bg-card);
  border:2px solid var(--border);
  color:var(--text-main);
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}

.type-chip::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  opacity:0;
  transition:opacity 0.3s ease;
}

.type-chip:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.type-chip.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 4px 16px var(--primary-glow);
}

.type-chip.active::before{
  opacity:1;
}

.tc-count{
  padding:2px 8px;
  background:rgba(255,255,255,0.2);
  border-radius:12px;
  font-size:11px;
  font-weight:700;
}

/* Enhanced Table */
.table-wrap{
  animation:fadeIn 0.6s ease 0.3s backwards;
}

.table-wrap table{
  transition:all 0.3s ease;
}

.table-wrap thead th{
  background:linear-gradient(180deg,var(--bg-card-hover),var(--bg-card));
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-size:12px;
  padding:16px 12px;
  border-bottom:2px solid var(--border-solid);
}

.table-wrap tbody tr{
  transition:all 0.3s ease;
  animation:fadeIn 0.4s ease backwards;
}

.table-wrap tbody tr:nth-child(1){animation-delay:0.05s;}
.table-wrap tbody tr:nth-child(2){animation-delay:0.1s;}
.table-wrap tbody tr:nth-child(3){animation-delay:0.15s;}
.table-wrap tbody tr:nth-child(4){animation-delay:0.2s;}
.table-wrap tbody tr:nth-child(5){animation-delay:0.25s;}

.table-wrap tbody tr:hover{
  background:var(--bg-card-hover);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transform:scale(1.01);
}

/* Enhanced Buttons */
.btn{
  position:relative;
  overflow:hidden;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.btn::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transform:translate(-50%,-50%);
  transition:width 0.6s,height 0.6s;
}

.btn:hover::before{
  width:300px;
  height:300px;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.btn:active{
  transform:translateY(0);
}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
}

/* Enhanced Dashboard Elements */
.db-hero{
  animation:fadeInDown 0.6s ease;
}

.db-kpi-row{
  animation:fadeIn 0.6s ease 0.2s backwards;
}

.db-kpi-card{
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor:pointer;
}

.db-kpi-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 16px 40px rgba(0,0,0,0.2);
}

.db-kpi-icon{
  transition:all 0.3s ease;
}

.db-kpi-card:hover .db-kpi-icon{
  transform:scale(1.15) rotate(10deg);
}

/* Enhanced Mini Cards */
.db-mini-row{
  animation:fadeIn 0.6s ease 0.3s backwards;
}

.db-mini-card{
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor:pointer;
}

.db-mini-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}

.db-mini-icon{
  transition:all 0.3s ease;
}

.db-mini-card:hover .db-mini-icon{
  transform:scale(1.2) rotate(5deg);
}

/* Enhanced Empty State */
.empty-state{
  animation:fadeIn 0.8s ease;
}

.empty-state i{
  animation:float 3s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* Enhanced Modal */
.modal{
  animation:modalSlideIn 0.4s cubic-bezier(0.4,0,0.2,1);
}

@keyframes modalSlideIn{
  from{opacity:0;transform:translateY(-50px) scale(0.9);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* Responsive Enhancements */
@media(max-width:768px){
  .section-header h2{
    font-size:22px;
  }

  .filter-row{
    flex-direction:column;
  }

  .filter-select{
    min-width:100%;
  }

  .export-bar{
    flex-direction:column;
  }

  .export-btn{
    width:100%;
    justify-content:center;
  }
}

/* ===== AKSESUAR TAKİP - PRECISION INDUSTRIAL ===== */
.aks-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  gap:20px;
  flex-wrap:wrap;
}

.aks-header-left{
  flex:1;
  min-width:300px;
}

.aks-title-group{
  display:flex;
  align-items:center;
  gap:16px;
}

.aks-icon-badge{
  width:56px;
  height:56px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  animation:aksPulse 3s ease-in-out infinite;
}

@keyframes aksPulse{
  0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(0,0,0,0.15);}
  50%{transform:scale(1.05);box-shadow:0 12px 32px rgba(0,0,0,0.2);}
}

.aks-title{
  font-size:28px;
  font-weight:800;
  color:var(--text-main);
  margin:0;
  letter-spacing:-0.5px;
}

.aks-subtitle{
  font-size:14px;
  color:var(--text-muted);
  margin:4px 0 0 0;
  font-weight:500;
}

.aks-header-right{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.aks-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}

.aks-btn::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transform:translate(-50%,-50%);
  transition:width 0.6s,height 0.6s;
}

.aks-btn:hover::before{
  width:300px;
  height:300px;
}

.aks-btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}

.aks-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
}

.aks-btn-secondary{
  background:var(--bg-card);
  color:var(--text-main);
  border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.aks-btn-secondary:hover{
  background:var(--bg-card-hover);
  border-color:var(--primary);
  transform:translateY(-2px);
}

.aks-toolbar{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.aks-search-box{
  flex:1;
  min-width:300px;
  position:relative;
  display:flex;
  align-items:center;
  background:var(--bg-card);
  border:2px solid var(--border);
  border-radius:12px;
  padding:0 16px;
  transition:all 0.3s ease;
}

.aks-search-box:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}

.aks-search-box i{
  color:var(--text-muted);
  font-size:16px;
  margin-right:12px;
}

.aks-search-box input{
  flex:1;
  border:none;
  background:transparent;
  padding:14px 0;
  font-size:14px;
  color:var(--text-main);
  outline:none;
}

.aks-search-box input::placeholder{
  color:var(--text-muted);
}

.aks-search-badge{
  padding:4px 12px;
  background:var(--primary-glow);
  color:var(--primary);
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

.aks-quick-stats{
  display:flex;
  gap:12px;
}

.aks-stat-mini{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:18px;
  font-weight:700;
  color:var(--text-main);
  transition:all 0.3s ease;
}

.aks-stat-mini:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.aks-stat-mini i{
  font-size:20px;
  color:var(--primary);
}

.aks-stat-success i{
  color:#10b981;
}

.aks-stat-warning i{
  color:#f59e0b;
}

.aks-table-container{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

.aks-table-wrapper{
  overflow-x:auto;
  overflow-y:auto;
  max-height:calc(100vh - 320px);
  position:relative;
}

.aks-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.aks-thead{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg-card);
}

.aks-th{
  background:linear-gradient(180deg,var(--bg-card-hover),var(--bg-card));
  border-bottom:2px solid var(--border-solid);
  border-right:1px solid var(--border);
  padding:16px 12px;
  text-align:left;
  font-weight:700;
  font-size:12px;
  color:var(--text-main);
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.aks-th:last-child{
  border-right:none;
}

.aks-th-content{
  display:flex;
  align-items:center;
  gap:8px;
}

.aks-th-content i{
  color:var(--primary);
  font-size:14px;
  opacity:0.9;
}

.aks-th-sticky-left{
  position:sticky;
  left:0;
  z-index:110;
  box-shadow:4px 0 8px rgba(0,0,0,0.08);
}

.aks-th-sticky-right{
  position:sticky;
  right:0;
  z-index:110;
  box-shadow:-4px 0 8px rgba(0,0,0,0.08);
}

.aks-tbody{
  background:var(--bg-card);
}

.aks-row{
  transition:all 0.3s ease;
  animation:aksRowFadeIn 0.5s ease forwards;
  opacity:0;
}

@keyframes aksRowFadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.aks-row:hover{
  background:var(--bg-card-hover);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.aks-td{
  padding:12px;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  vertical-align:middle;
}

.aks-td:last-child{
  border-right:none;
}

.aks-td-sticky-left{
  position:sticky;
  left:0;
  z-index:10;
  background:var(--bg-card);
  box-shadow:4px 0 8px rgba(0,0,0,0.06);
}

.aks-td-sticky-right{
  position:sticky;
  right:0;
  z-index:10;
  background:var(--bg-card);
  box-shadow:-4px 0 8px rgba(0,0,0,0.06);
  text-align:center;
}

.aks-row:hover .aks-td-sticky-left,
.aks-row:hover .aks-td-sticky-right{
  background:var(--bg-card-hover);
}

.aks-input{
  width:100%;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--text-main);
  font-size:13px;
  font-family:inherit;
  transition:all 0.2s ease;
}

.aks-input:hover{
  background:var(--bg-input);
  border-color:var(--border);
}

.aks-input:focus{
  outline:none;
  background:var(--bg-card);
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}

.aks-input-number{
  text-align:center;
  font-weight:600;
  color:var(--primary);
}

.aks-counter{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
}

.aks-counter-btn{
  width:32px;
  height:32px;
  border:1px solid var(--border);
  background:var(--bg-card-hover);
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-main);
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
  font-size:12px;
}

.aks-counter-btn:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  transform:scale(1.1);
}

.aks-counter-btn:active{
  transform:scale(0.95);
}

.aks-counter-minus:hover{
  background:#ef4444;
  border-color:#ef4444;
}

.aks-counter-plus:hover{
  background:#10b981;
  border-color:#10b981;
}

.aks-counter-value{
  min-width:40px;
  text-align:center;
  font-weight:700;
  font-size:15px;
  color:var(--text-main);
}

.aks-delete-btn{
  width:36px;
  height:36px;
  border:1px solid var(--border);
  background:var(--bg-card-hover);
  border-radius:8px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#ef4444;
  transition:all 0.2s ease;
}

.aks-delete-btn:hover{
  background:#ef4444;
  color:#fff;
  border-color:#ef4444;
  transform:scale(1.1);
}

.aks-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px 20px;
  text-align:center;
}

.aks-empty-icon{
  width:120px;
  height:120px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary-glow),rgba(0,0,0,0.02));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  color:var(--primary);
  margin-bottom:24px;
  animation:aksEmptyPulse 2s ease-in-out infinite;
}

@keyframes aksEmptyPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}

.aks-empty-state h3{
  font-size:24px;
  font-weight:700;
  color:var(--text-main);
  margin:0 0 8px 0;
}

.aks-empty-state p{
  font-size:14px;
  color:var(--text-muted);
  margin:0 0 24px 0;
}

@media(max-width:768px){
  .aks-header{
    flex-direction:column;
    align-items:stretch;
  }

  .aks-header-left{
    min-width:100%;
  }

  .aks-header-right{
    width:100%;
  }

  .aks-btn{
    flex:1;
    justify-content:center;
  }

  .aks-toolbar{
    flex-direction:column;
  }

  .aks-search-box{
    min-width:100%;
  }

  .aks-quick-stats{
    width:100%;
    justify-content:space-between;
  }

  .aks-stat-mini{
    flex:1;
    flex-direction:column;
    gap:4px;
    padding:12px 8px;
  }

  .aks-table-wrapper{
    max-height:calc(100vh - 420px);
  }

  .aks-th{
    padding:12px 8px;
    font-size:11px;
  }

  .aks-td{
    padding:8px;
  }

  .aks-input{
    padding:6px 8px;
    font-size:12px;
  }

  .aks-counter-btn{
    width:28px;
    height:28px;
  }
}

/* ===== CARDS - ULTRA-MODERN 3D ===== */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  transition:all var(--transition-base);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}
.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  opacity:0;
  transition:opacity var(--transition-base);
}
.card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), var(--primary-glow), transparent 50%);
  opacity:0;
  transition:opacity 0.3s;
  pointer-events:none;
}
.card:hover{
  border-color:var(--primary);
  box-shadow:
    var(--shadow-card-hover),
    0 0 30px var(--primary-glow);
  transform:translateY(-4px) translateZ(10px);
}
.card:hover::before{opacity:1;}
.card:hover::after{opacity:0.1;}
.card-title{
  font-size:15.5px;
  font-weight:700;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:9px;
  letter-spacing:-0.2px;
  transition:all var(--transition-base);
}
.card:hover .card-title{
  transform:translateZ(5px);
}
.card-title i{
  color:var(--primary);
  font-size:15px;
  filter:drop-shadow(0 2px 4px var(--primary-glow));
  transition:all var(--transition-bounce);
}
.card:hover .card-title i{
  transform:scale(1.2) rotate(-10deg);
}

/* ===== BUTTONS - MODERN FLAT DESIGN WITH TOUCH FEEDBACK ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 24px;
  min-height:44px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  border:none;
  transition:all var(--transition-base);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  letter-spacing:0.2px;
  font-family:inherit;
  /* Touch optimization */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* Ripple effect on tap */
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,0.4), transparent 70%);
  opacity:0;
  transform:scale(0);
  transition:all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:active::after{
  opacity:1;
  transform:scale(2);
  transition:all 0s;
}
  transition:all 0s;
}
.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}
.btn:active{
  transform:scale(0.97);
  transition:all 0.1s;
}

/* Button variants - Flat Design */
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{
  background:var(--primary-dark);
  box-shadow:var(--shadow-md);
}
.btn-primary:active{
  background:var(--primary-dark);
}

.btn-secondary{
  background:var(--bg-card);
  color:var(--text-main);
  border:2px solid var(--border);
}
.btn-secondary:hover{
  border-color:var(--primary);
  background:var(--bg-card-hover);
}

.btn-outline{
  background:transparent;
  color:var(--primary);
  border:2px solid var(--primary);
}
.btn-outline:hover{
  background:var(--primary);
  color:#fff;
}

.btn-danger{
  background:var(--danger);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn-danger:hover{
  background:var(--danger-dark);
  box-shadow:var(--shadow-md);
}

.btn-success{
  background:var(--success);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn-success:hover{
  background:var(--success-dark);
  box-shadow:var(--shadow-md);
}

/* Button sizes */
.btn-sm{
  padding:8px 16px;
  min-height:40px;
  font-size:13px;
  border-radius:var(--radius-xs);
}
.btn-xs{
  padding:6px 12px;
  min-height:36px;
  font-size:12px;
  border-radius:var(--radius-xs);
}
.btn-lg{
  padding:14px 28px;
  min-height:52px;
  font-size:16px;
  border-radius:var(--radius);
}

/* Disabled state */
.btn:disabled,.btn.disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* ===== FORMS - MODERN & TOUCH-FRIENDLY ===== */
.form-group{
  margin-bottom:var(--space-5);
  position:relative;
}
.form-group label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:var(--space-2);
  color:var(--text-main);
  letter-spacing:0.2px;
}
.form-input,input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="tel"],input[type="url"],textarea,select{
  width:100%;
  padding:12px 16px;
  min-height:44px;
  background:var(--bg-input);
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-main);
  font-size:16px; /* Prevents iOS zoom */
  font-family:inherit;
  transition:all var(--transition-base);
  /* Touch optimization */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.form-input:hover,input:hover,textarea:hover,select:hover{
  border-color:var(--primary-light);
}
.form-input:focus,input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
  background:var(--bg-card);
}
.form-input::placeholder,input::placeholder,textarea::placeholder{
  color:var(--text-dim);
  font-weight:400;
}
.form-input:disabled,input:disabled,textarea:disabled,select:disabled{
  opacity:0.5;
  cursor:not-allowed;
  background:var(--glass);
}

/* Textarea specific */
textarea{
  min-height:120px;
  resize:vertical;
  line-height:1.6;
}

/* Select specific */
select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:40px;
}

/* Validation States */
.form-input.error{
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,0.1);
}
.form-input.success{
  border-color:#10b981;
  box-shadow:0 0 0 4px rgba(16,185,129,0.1);
}
.form-error{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  margin-top:var(--space-2);
  font-size:12px;
  color:#ef4444;
  font-weight:500;
}
.form-error i{font-size:14px;}
.form-success{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  margin-top:var(--space-2);
  font-size:12px;
  color:#10b981;
  font-weight:500;
}
.form-success i{font-size:14px;}

/* Select Dropdown */
select.form-input{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8a94' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--space-4) center;
  padding-right:var(--space-10);
}
select.form-input:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Textarea */
textarea.form-input{
  resize:vertical;
  min-height:80px;
  line-height:1.6;
}

/* Input with Icon */
.input-with-icon{
  position:relative;
}
.input-with-icon i{
  position:absolute;
  left:var(--space-4);
  top:50%;
  transform:translateY(-50%);
  color:var(--text-dim);
  font-size:16px;
  pointer-events:none;
  transition:all var(--transition-base);
}
.input-with-icon .form-input{
  padding-left:var(--space-10);
}
.input-with-icon .form-input:focus + i{
  color:var(--primary);
}

/* ===== TABLE - NOTION/LINEAR LEVEL ===== */
.table-wrap{
  overflow-x:auto;
  border-radius:var(--radius-sm);
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  background:var(--bg-card);
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:600px;
}
th{
  background:var(--bg-input);
  padding:var(--space-3) var(--space-4);
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--text-muted);
  font-weight:700;
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:2px solid var(--border);
}
td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--text-main);
  transition:all var(--transition-fast);
}
tr:last-child td{
  border-bottom:none;
}

/* Zebra Stripes */
tbody tr:nth-child(even){
  background:rgba(0,0,0,0.02);
}
[data-theme*="dark"] tbody tr:nth-child(even),
[data-theme*="midnight"] tbody tr:nth-child(even),
[data-theme*="cyber"] tbody tr:nth-child(even){
  background:rgba(255,255,255,0.02);
}

/* Hover Effect */
tbody tr{
  transition:all var(--transition-base);
  cursor:pointer;
}
tbody tr:hover{
  background:var(--glass);
  transform:scale(1.01);
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
tbody tr:hover td{
  color:var(--primary);
}

/* Table actions with hover reveal */
.table-actions{
  display:flex;
  gap:var(--space-1);
  align-items:center;
}
.table-actions-more{
  display:flex;
  gap:var(--space-1);
  opacity:0;
  transform:translateX(-10px);
  transition:all var(--transition-base);
  pointer-events:none;
}
tr:hover .table-actions-more{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.table-actions .btn{
  transition:all var(--transition-base);
}
.table-actions .btn:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* Responsive Table */
@media(max-width:768px){
  .table-wrap{
    border-radius:0;
    border-left:none;
    border-right:none;
  }
  th,td{
    padding:var(--space-2) var(--space-3);
    font-size:12px;
  }
  .table-actions-more{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
  }
}

/* ===== CHIPS - ENHANCED ===== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 12px;
  border-radius:20px;
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition-base);
  letter-spacing:0.2px;
  border:1px solid transparent;
}
.chip:hover{
  filter:brightness(1.15);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.chip:active{transform:scale(0.95);}
.chip-success{
  background:rgba(16,185,129,0.15);
  color:#10b981;
  border-color:rgba(16,185,129,0.2);
}
.chip-success:hover{
  background:rgba(16,185,129,0.25);
  box-shadow:0 2px 8px rgba(16,185,129,0.2);
}
.chip-warning{
  background:rgba(245,158,11,0.15);
  color:#f59e0b;
  border-color:rgba(245,158,11,0.2);
}
.chip-warning:hover{
  background:rgba(245,158,11,0.25);
  box-shadow:0 2px 8px rgba(245,158,11,0.2);
}
.chip-danger{
  background:rgba(239,68,68,0.15);
  color:#ef4444;
  border-color:rgba(239,68,68,0.2);
}
.chip-danger:hover{
  background:rgba(239,68,68,0.25);
  box-shadow:0 2px 8px rgba(239,68,68,0.2);
}
.chip-info{
  background:rgba(59,130,246,0.15);
  color:#3b82f6;
  border-color:rgba(59,130,246,0.2);
}
.chip-info:hover{
  background:rgba(59,130,246,0.25);
  box-shadow:0 2px 8px rgba(59,130,246,0.2);
}

/* ===== MODAL - ENHANCED ===== */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  z-index:100;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:16px;
  animation:fadeIn 0.3s ease-out;
}
.modal-overlay.show{display:flex;}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
.modal{
  background:var(--bg-card-solid);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  max-width:520px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  animation:modalIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
@keyframes modalIn{
  from{
    opacity:0;
    transform:scale(0.9) translateY(20px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

/* Enhanced Detail Modal */
.modal-detail{
  padding:0;
  max-width:600px;
  display:flex;
  flex-direction:column;
  max-height:90vh;
}
.modal-header-new{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 26px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:var(--bg-card-solid);
  z-index:10;
}
.modal-header-new h3{
  font-size:19px;
  font-weight:700;
  color:var(--text-main);
  margin:0;
  letter-spacing:-0.3px;
}
.modal-close-btn{
  width:38px;
  height:38px;
  border-radius:9px;
  background:var(--glass);
  border:1px solid var(--border);
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all var(--transition-base);
  font-size:17px;
}
.modal-close-btn:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  transform:rotate(90deg) scale(1.05);
  box-shadow:0 4px 12px var(--primary-glow);
}
.modal-close-btn:active{transform:rotate(90deg) scale(0.95);}

.modal-body-new{
  padding:26px;
  flex:1;
  overflow-y:auto;
  max-height:50vh;
}

.modal-actions-new{
  padding:18px 26px;
  border-top:1px solid var(--border);
  background:var(--bg-card-solid);
  position:sticky;
  bottom:0;
  z-index:10;
}
.modal-actions-primary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
.modal-actions-secondary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.modal-action-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:14px 10px;
  border-radius:11px;
  border:none;
  cursor:pointer;
  transition:all var(--transition-base);
  font-family:inherit;
  font-weight:600;
}
.modal-action-btn i{
  font-size:21px;
  transition:transform var(--transition-base);
}
.modal-action-btn:hover i{
  transform:scale(1.15);
}
.modal-action-btn span{font-size:12.5px;}
.modal-action-btn:active{transform:scale(0.95);}

.modal-action-btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  box-shadow:0 4px 16px var(--primary-glow);
}
.modal-action-btn.primary:hover{
  box-shadow:0 6px 24px var(--primary-glow);
  transform:translateY(-2px);
}

.modal-action-btn.secondary{
  background:var(--glass);
  color:var(--text-main);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.modal-action-btn.secondary:hover{
  border-color:var(--primary);
  background:var(--bg-card-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}

@media(max-width:640px){
  .modal-detail{max-width:100%;max-height:80vh;border-radius:16px 16px 0 0;margin:0;}
  .modal-actions-secondary{grid-template-columns:repeat(2,1fr);}
  .modal-action-btn span{font-size:11px;}
  .modal-action-btn i{font-size:18px;}
  .modal-action-btn{padding:10px 6px;}
  .modal-overlay{padding:0!important;align-items:flex-end!important;}
  .modal-overlay .modal-detail{width:100%!important;border-radius:16px 16px 0 0!important;}
  .modal-body-new{max-height:40vh!important;padding:16px!important;}
  .modal-header-new{padding:16px 20px!important;}
  .modal-actions-new{padding:12px 16px!important;}
}

/* ===== TOAST ===== */
/* ========== LOADING & SKELETON SCREENS ========== */
/* Global Loading Overlay */
.global-loading{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1);
}
.global-loading.show{opacity:1;pointer-events:auto;}
.loading-spinner{
  width:60px;height:60px;border-radius:50%;
  border:4px solid rgba(255,255,255,0.2);
  border-top-color:var(--primary);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Enhanced Loading Spinner with pulse */
.loading-spinner-enhanced{
  position:relative;
  width:60px;height:60px;
}
.loading-spinner-enhanced::before{
  content:'';position:absolute;inset:0;
  border-radius:50%;border:4px solid var(--primary);
  opacity:0.2;animation:pulse 1.5s ease-in-out infinite;
}
.loading-spinner-enhanced::after{
  content:'';position:absolute;inset:0;
  border-radius:50%;border:4px solid transparent;
  border-top-color:var(--primary);
  animation:spin 0.8s linear infinite;
}
@keyframes pulse{
  0%, 100%{transform:scale(1);opacity:0.2;}
  50%{transform:scale(1.2);opacity:0;}
}

/* Skeleton Screens */
.skeleton{
  background:linear-gradient(90deg, var(--bg-card) 25%, color-mix(in oklab, var(--primary) 8%, var(--bg-card)) 50%, var(--bg-card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.skeleton-card{
  padding:20px;border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:12px;
}
.skeleton-line{
  height:16px;margin-bottom:10px;border-radius:4px;
}
.skeleton-line.short{width:60%;}
.skeleton-line.medium{width:80%;}
.skeleton-line.long{width:100%;}
.skeleton-title{height:24px;width:40%;margin-bottom:16px;border-radius:6px;}
.skeleton-circle{width:48px;height:48px;border-radius:50%;}
.skeleton-rect{height:120px;border-radius:var(--radius-sm);}

/* Skeleton KPI Card */
.skeleton-kpi{
  display:flex;align-items:center;gap:16px;
  padding:20px;border:1px solid var(--border);
  border-radius:var(--radius);
}
.skeleton-kpi .skeleton-circle{flex-shrink:0;}
.skeleton-kpi-body{flex:1;}

/* Button Loading State */
.btn.loading{position:relative;color:transparent !important;pointer-events:none;}
.btn.loading::after{
  content:'';position:absolute;
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;border-radius:50%;
  top:50%;left:50%;
  margin:-8px 0 0 -8px;
  animation:spin 0.6s linear infinite;
}

/* Smooth transitions for all interactive elements */
.btn, .chip, .card, .modal-action-btn, .action-btn-primary, .action-btn-menu,
.sidebar nav a, .type-chip, .filter-select, input, textarea, select{
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* Micro-interactions */
.btn:active, .chip:active, .modal-action-btn:active{
  transform:scale(0.96);
}

/* Fade in animation for cards */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.uni-mobile-card, .stat-card, .card{
  animation:fadeInUp 0.4s cubic-bezier(0.4,0,0.2,1) backwards;
}
.uni-mobile-card:nth-child(1){animation-delay:0.05s;}
.uni-mobile-card:nth-child(2){animation-delay:0.1s;}
.uni-mobile-card:nth-child(3){animation-delay:0.15s;}
.uni-mobile-card:nth-child(4){animation-delay:0.2s;}
.uni-mobile-card:nth-child(5){animation-delay:0.25s;}

/* Success/Error feedback animations */
@keyframes successPulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,0.7);}
  70%{box-shadow:0 0 0 10px rgba(16,185,129,0);}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}
}
@keyframes errorShake{
  0%, 100%{transform:translateX(0);}
  10%, 30%, 50%, 70%, 90%{transform:translateX(-4px);}
  20%, 40%, 60%, 80%{transform:translateX(4px);}
}
.success-feedback{animation:successPulse 0.6s;}
.error-feedback{animation:errorShake 0.5s;}
  animation:spin 0.6s linear infinite;
}

/* Pull to Refresh */
.ptr-container{
  position:absolute;top:-60px;left:0;right:0;
  height:60px;display:none;align-items:center;justify-content:center;
  transition:transform 0.3s;
}
.ptr-container.pulling{transform:translateY(60px);}
.ptr-container.refreshing{transform:translateY(60px);}
.ptr-icon{
  font-size:24px;color:var(--primary);
  transition:transform 0.3s;
}
.ptr-container.pulling .ptr-icon{transform:rotate(180deg);}
.ptr-container.refreshing .ptr-icon{animation:spin 1s linear infinite;}

/* Swipe Gestures */
.swipe-actions{
  position:absolute;top:0;bottom:0;
  width:80px;display:flex;align-items:center;
  z-index:1;pointer-events:none;
}
.swipe-action{
  width:80px;height:100%;
  display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  font-size:11px;font-weight:700;
  border-radius:var(--radius-sm);
}
.swipe-delete{
  background:linear-gradient(135deg, #ef4444, #dc2626);
  color:#fff;
}
.swipe-edit{
  background:linear-gradient(135deg, #3b82f6, #2563eb);
  color:#fff;
}
.swipe-action i{font-size:18px;}

.toast-container{position:fixed;top:20px;right:20px;z-index:var(--z-toast,200);display:flex;flex-direction:column;gap:12px;max-width:420px;pointer-events:none;}
.toast-container .toast{pointer-events:auto;}
/* ===== TOAST NOTIFICATIONS ===== */
.toast{
  padding:0;border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:0;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
  backdrop-filter:blur(20px);border:1px solid var(--border);
  min-width:320px;max-width:420px;
  opacity:0;transform:translateX(100px);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.toast-icon{
  padding:14px 16px;font-size:20px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.1);
}
.toast-content{
  flex:1;padding:14px 12px;
}
.toast-message{
  font-weight:600;line-height:1.4;
}
.toast-close{
  padding:14px 16px;background:transparent;border:none;color:currentColor;
  cursor:pointer;opacity:0.6;transition:opacity 0.2s;font-size:14px;
}
.toast-close:hover{opacity:1;}

.toast::after{
  content:'';position:absolute;bottom:0;left:0;height:3px;
  background:currentColor;opacity:0.3;
  animation:toastProgress 4s linear forwards;
}
@keyframes toastProgress{from{width:100%}to{width:0%}}

.toast-success{background:rgba(5,150,105,0.15);color:#34d399;border-color:rgba(5,150,105,0.3);}
.toast-error{background:rgba(239,68,68,0.15);color:#f87171;border-color:rgba(239,68,68,0.3);}
.toast-info{background:rgba(59,130,246,0.15);color:#60a5fa;border-color:rgba(59,130,246,0.3);}
.toast-warning{background:rgba(245,158,11,0.15);color:#fbbf24;border-color:rgba(245,158,11,0.3);}

@keyframes toastIn{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}

/* ===== THEME BUTTONS ===== */
.theme-btn{padding:10px;border-radius:var(--radius-sm);border:2px solid var(--border);cursor:pointer;text-align:center;font-size:12px;font-weight:600;transition:all 0.25s;background:var(--glass);}
.theme-btn:hover,.theme-btn.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow);}

/* ===== EMPTY STATE ===== */
.empty-state{text-align:center;padding:40px 20px;}
.empty-state i{font-size:40px;color:var(--text-dim);opacity:0.3;margin-bottom:12px;}
.empty-state p{color:var(--text-muted);font-size:14px;}

/* ===== PROGRESS BAR ===== */
.progress-bar{height:5px;background:var(--glass);border-radius:10px;overflow:hidden;}
.progress-bar .fill{height:100%;border-radius:10px;transition:width 0.6s cubic-bezier(0.4,0,0.2,1);}

/* ===== SIZE INPUT ROW ===== */
.size-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);}
.size-row:last-child{border-bottom:none;}
.size-row label{flex:1;font-size:13px;font-weight:500;min-width:0;}
.size-row input{width:90px;flex-shrink:0;text-align:right;font-weight:600;}
@media (max-width: 640px){
  .size-row{flex-direction:column;align-items:stretch;gap:4px;padding:8px 0;}
  .size-row label{font-size:12px;font-weight:600;color:var(--text-muted,#64748b);min-width:0;width:auto;white-space:normal;}
  .size-row input{width:100%;text-align:left;font-size:15px;padding:10px 12px;}
}

/* ===== MOBILE CARDS (for table alternative) ===== */
.mobile-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;transition:all 0.2s;position:relative;}
.mobile-card:active{transform:scale(0.99);}
.mc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.mc-title{font-weight:700;color:var(--primary);font-size:14px;}
.mc-meta{font-size:12px;color:var(--text-muted);margin-bottom:4px;display:flex;gap:12px;flex-wrap:wrap;}
.mc-meta span{display:flex;align-items:center;gap:4px;}
.mc-actions{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}

/* ===== DROPDOWN MENU ===== */
.dropdown-menu{position:absolute;top:100%;right:0;background:var(--bg-card-solid);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,0.3);min-width:180px;z-index:50;opacity:0;transform:translateY(-10px) scale(0.95);pointer-events:none;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);margin-top:4px;}
.dropdown-menu.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--text-main);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;border-bottom:1px solid var(--border);}
.dropdown-item:last-child{border-bottom:none;}
.dropdown-item:hover{background:var(--glass);color:var(--primary);}
.dropdown-item:active{transform:scale(0.98);}
.dropdown-item i{width:18px;text-align:center;font-size:14px;}
.dropdown-item.danger{color:#ef4444;}
.dropdown-item.danger:hover{background:rgba(239,68,68,0.1);}

/* ===== CONTEXT MENU (Desktop) ===== */
.context-menu{position:fixed;background:var(--bg-card-solid);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 32px rgba(0,0,0,0.4);min-width:200px;z-index:200;opacity:0;transform:scale(0.95);pointer-events:none;transition:all 0.15s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(20px);}
.context-menu.show{opacity:1;transform:scale(1);pointer-events:auto;}
.context-menu-item{display:flex;align-items:center;gap:12px;padding:10px 16px;color:var(--text-main);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;border-bottom:1px solid var(--border);}
.context-menu-item:last-child{border-bottom:none;}
.context-menu-item:hover{background:var(--glass);color:var(--primary);}
.context-menu-item:active{transform:scale(0.98);}
.context-menu-item i{width:20px;text-align:center;font-size:14px;}
.context-menu-item .shortcut{margin-left:auto;font-size:11px;color:var(--text-dim);font-weight:400;}
.context-menu-item.danger{color:#ef4444;}
.context-menu-item.danger:hover{background:rgba(239,68,68,0.1);}
.context-menu-divider{height:1px;background:var(--border);margin:4px 0;}

/* ===== FAB ===== */
/* ===== FAB (Floating Action Button) - TOUCH OPTIMIZED ===== */
.fab{
  display:none;
  position:fixed;
  bottom:90px;
  right:20px;
  z-index:50;
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  border-radius:var(--radius-full);
  background:var(--accent);
  color:#fff;
  border:none;
  font-size:24px;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:all var(--transition-base);
  /* Touch optimization */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.fab:hover{
  transform:scale(1.05);
  box-shadow:0 8px 24px rgba(5,150,105,0.4);
}
.fab:active{
  transform:scale(0.95);
}

/* ===== BOTTOM NAV (Mobile) - TOUCH OPTIMIZED ===== */
.bottom-nav{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:50;
  background:var(--bg-card);
  border-top:1px solid var(--border);
  padding:8px 0;
  padding-bottom:max(8px,env(safe-area-inset-bottom));
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 -2px 16px rgba(0,0,0,0.08);
}
.bottom-nav-inner{
  display:flex;
  justify-content:space-around;
  max-width:500px;
  margin:0 auto;
  padding:0 8px;
}
.bottom-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 12px;
  min-width:64px;
  min-height:56px;
  color:var(--text-muted);
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition-base);
  border-radius:var(--radius-sm);
  /* Touch optimization */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.bottom-nav a i{
  font-size:20px;
  transition:all var(--transition-base);
}
.bottom-nav a:active{
  transform:scale(0.95);
  background:var(--glass);
}
.bottom-nav a.active{
  color:var(--primary);
  background:var(--glass);
}
.bottom-nav a.active i{
  transform:scale(1.1);
}

/* ===== SECTION HEADER ===== */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.section-header h2{font-size:20px;font-weight:800;}
.section-header p{font-size:13px;color:var(--text-muted);}

/* ===== FILTER BUTTONS ===== */
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;}
.filter-bar .btn-sm{font-size:11px;padding:5px 10px;}

/* ===== GRID LAYOUTS ===== */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;}

/* ===== MOBILE RESPONSIVE - MODERN & TOUCH-OPTIMIZED ===== */
@media(max-width:1200px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:768px){
  /* ===== SIDEBAR & NAVIGATION ===== */
  .sidebar{
    transform:translateX(-260px);
    box-shadow:none;
  }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:var(--shadow-md);
  }

  /* Smooth slide animation */
  @keyframes slideIn{
    from{transform:translateX(-260px);}
    to{transform:translateX(0);}
  }
  @keyframes slideOut{
    from{transform:translateX(0);}
    to{transform:translateX(-260px);}
  }

  .main{margin-left:0!important;}

  /* ===== TOPBAR - TOUCH OPTIMIZED ===== */
  .topbar{padding:12px 16px;}
  .topbar .menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    /* Touch feedback */
    -webkit-tap-highlight-color:transparent;
  }
  .topbar .menu-btn:active{
    transform:scale(0.95);
    background:var(--primary);
    color:#fff;
  }

  /* Show hamburger icon */
  .menu-btn-icon{
    display:flex!important;
  }

  /* ===== CONTENT SPACING ===== */
  .content{padding:16px 16px 160px;}

  /* ===== STATS GRID - MOBILE OPTIMIZED ===== */
  .stats-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .stat-card{
    padding:16px;
    /* Remove 3D effects on mobile for performance */
    transform:none!important;
  }
  .stat-card:hover{
    transform:translateY(-2px)!important;
  }
  .stat-card:active{
    transform:scale(0.98)!important;
  }
  .stat-value{font-size:22px;}
  .stat-icon{
    width:40px;
    height:40px;
    font-size:16px;
  }

  /* ===== BUTTONS - TOUCH FRIENDLY (44px minimum) ===== */
  .btn,.btn-primary,.btn-secondary,.btn-outline{
    min-height:44px;
    padding:12px 20px;
    font-size:14px;
    /* Touch optimization */
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .btn:active,.btn-primary:active,.btn-secondary:active{
    transform:scale(0.97);
  }
  .btn-sm{
    min-height:40px;
    padding:10px 16px;
    font-size:13px;
  }

  /* ===== GRIDS ===== */
  .grid-auto{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}

  /* ===== CARDS ===== */
  .card{
    padding:16px;
    border-radius:var(--radius);
  }

  /* ===== TOPBAR ELEMENTS ===== */
  .topbar-badge{display:none;}
  .topbar-avatar{
    min-width:44px;
    min-height:44px;
  }

  /* ===== BOTTOM NAVIGATION ===== */
  .bottom-nav{display:block;}

  /* ===== FAB BUTTON ===== */
  .fab{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:56px;
    min-height:56px;
    /* Touch feedback */
    -webkit-tap-highlight-color:transparent;
  }
  .fab:active{
    transform:scale(0.92);
  }

  /* ===== SECTION HEADERS ===== */
  .section-header h2{font-size:20px;}

  /* ===== FILTER BAR - HORIZONTAL SCROLL ===== */
  .filter-bar{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .filter-bar::-webkit-scrollbar{display:none;}
  .filter-bar .btn-sm{flex-shrink:0;}

  /* ===== FORMS ===== */
  .form-grid-2{grid-template-columns:1fr!important;}
  .form-grid-span2{grid-column:span 1!important;}

  /* Input fields - touch friendly */
  input,textarea,select{
    min-height:44px;
    font-size:16px; /* Prevents iOS zoom */
    padding:12px 16px;
  }

  /* ===== TABLES ===== */
  .table-desktop{display:none;}
  .table-mobile{display:block!important;}

  /* ===== TOAST NOTIFICATIONS ===== */
  .toast-container{
    left:16px;
    right:16px;
    max-width:none;
    top:auto;
    bottom:90px;
  }

  /* ===== MODALS ===== */
  .modal{
    max-width:100%;
    margin:0 16px;
    max-height:90vh;
    border-radius:var(--radius-lg);
  }

  /* ===== MOBILE OPTIMIZATIONS ===== */
  .dropdown-menu{
    min-width:200px;
    max-width:calc(100vw - 32px);
  }

  /* Disable context menu on mobile */
  .context-menu{display:none!important;}

  /* Always show action buttons on mobile */
  .table-actions-more{
    opacity:1!important;
    transform:translateX(0)!important;
    pointer-events:auto!important;
  }

  /* ===== TOUCH GESTURES - SWIPE INDICATORS ===== */
  .swipeable{
    position:relative;
  }
  .swipeable::after{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:40%;
    background:var(--primary);
    border-radius:0 4px 4px 0;
    opacity:0;
    transition:opacity var(--transition-fast);
  }
  .swipeable:active::after{
    opacity:0.3;
  }
}

/* ===== SMALL MOBILE (380px and below) ===== */
@media(max-width:380px){
  .stats-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .stat-card{padding:14px;}
  .stat-value{font-size:20px;}
  .content{padding:12px 12px 160px;}

  /* Smaller buttons on very small screens */
  .btn,.btn-primary,.btn-secondary{
    min-height:44px;
    padding:10px 16px;
    font-size:13px;
  }
}

/* ===== ENHANCED FILTER BAR ===== */
.type-filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.type-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:25px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.25s;border:2px solid var(--border);background:var(--glass);color:var(--text-muted);user-select:none;}
.type-chip:hover{border-color:var(--primary);color:var(--text-main);transform:translateY(-1px);}
.type-chip.active{border-color:var(--primary);background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 2px 12px var(--primary-glow);}
.type-chip i{font-size:12px;}
.type-chip .tc-count{background:rgba(255,255,255,0.2);padding:1px 6px;border-radius:10px;font-size:10px;font-weight:700;}
.type-chip:not(.active) .tc-count{background:var(--glass);color:var(--text-dim);}

.search-bar{position:relative;margin-bottom:14px;}
.search-bar input{width:100%;padding:10px 14px 10px 40px;background:var(--bg-input);border:1px solid var(--border);border-radius:25px;color:var(--text-main);font-size:13px;font-family:inherit;transition:all 0.25s;}
.search-bar input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.search-bar input::placeholder{color:var(--text-dim);}
.search-bar i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:14px;}

.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.filter-select{padding:7px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);font-size:12px;font-family:inherit;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8a94' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;transition:all 0.2s;min-width:120px;}
.filter-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}

.list-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin-bottom:18px;}
.list-stat-mini{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;text-align:center;transition:all 0.2s;cursor:pointer;position:relative;overflow:hidden;}
.list-stat-mini:hover{border-color:var(--primary);transform:translateY(-1px);}
.list-stat-mini.active{border-color:var(--primary);background:linear-gradient(135deg,rgba(124,58,237,0.1),rgba(124,58,237,0.05));}
.list-stat-mini .lsm-value{font-size:20px;font-weight:800;color:var(--primary);}
.list-stat-mini .lsm-label{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-top:2px;}

.type-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.type-badge.standart{background:rgba(124,58,237,0.12);color:#a78bfa;}
.type-badge.fermuar{background:rgba(59,130,246,0.12);color:#60a5fa;}
.type-badge.lastik{background:rgba(16,185,129,0.12);color:#34d399;}
.type-badge.dugme{background:rgba(245,158,11,0.12);color:#fbbf24;}
.type-badge.toptan{background:rgba(236,72,153,0.12);color:#f472b6;}

.result-info{font-size:12px;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.result-info strong{color:var(--primary);}

/* Enhanced mobile cards for unified list */
.uni-mobile-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;transition:all 0.2s;border-left:3px solid var(--primary);position:relative;}
.uni-mobile-card.type-fermuar{border-left-color:#3b82f6;}
.uni-mobile-card.type-lastik{border-left-color:#10b981;}
.uni-mobile-card.type-dugme{border-left-color:#f59e0b;}
.uni-mobile-card.type-toptan{border-left-color:#ec4899;}
.uni-mobile-card:active{transform:scale(0.99);}

/* Mobile card action buttons - improved */
.uni-mobile-card .mc-actions-new{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.uni-mobile-card .action-btn-primary{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;}
.uni-mobile-card .action-btn-primary:active{transform:scale(0.96);}
.uni-mobile-card .action-btn-menu{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--border);border-radius:8px;color:var(--text-main);font-size:18px;cursor:pointer;transition:all 0.2s;position:relative;}
.uni-mobile-card .action-btn-menu:active{transform:scale(0.96);}

/* Card dropdown menu - positioned relative to card */
.card-dropdown-menu{
  position:absolute;
  bottom:70px;right:14px;
  background:var(--bg-card-solid);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  min-width:200px;
  z-index:50;
  opacity:0;
  transform:translateY(10px) scale(0.95);
  pointer-events:none;
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.card-dropdown-menu.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* ===== MISC ===== */
.clickable{cursor:pointer;transition:all 0.2s;}
.clickable:hover{opacity:0.8;}
/* ===== LOADING & EMPTY STATES - NOTION/LINEAR LEVEL ===== */

/* Skeleton Loaders */
.skeleton{
  background:linear-gradient(
    90deg,
    var(--glass) 25%,
    color-mix(in srgb, var(--primary) 8%, var(--glass)) 50%,
    var(--glass) 75%
  );
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

.skeleton-card{
  padding:var(--space-5);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:var(--space-3);
}
.skeleton-line{
  height:16px;
  margin-bottom:var(--space-3);
  border-radius:var(--radius-xs);
}
.skeleton-line.short{width:60%;}
.skeleton-line.medium{width:80%;}
.skeleton-line.long{width:100%;}
.skeleton-title{
  height:24px;
  width:40%;
  margin-bottom:var(--space-4);
  border-radius:var(--radius-sm);
}
.skeleton-circle{
  width:48px;
  height:48px;
  border-radius:var(--radius-full);
}
.skeleton-rect{
  height:120px;
  border-radius:var(--radius-sm);
}

/* Skeleton KPI Card */
.skeleton-kpi{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-5);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.skeleton-kpi .skeleton-circle{flex-shrink:0;}
.skeleton-kpi-body{flex:1;}

/* Enhanced Loading Spinner */
.loading-spinner{
  width:60px;
  height:60px;
  border-radius:var(--radius-full);
  border:4px solid rgba(255,255,255,0.2);
  border-top-color:var(--primary);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.loading-spinner-enhanced{
  position:relative;
  width:60px;
  height:60px;
}
.loading-spinner-enhanced::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius-full);
  border:4px solid var(--primary);
  opacity:0.2;
  animation:pulse 1.5s ease-in-out infinite;
}
.loading-spinner-enhanced::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius-full);
  border:4px solid transparent;
  border-top-color:var(--primary);
  animation:spin 0.8s linear infinite;
}
@keyframes pulse{
  0%, 100%{transform:scale(1);opacity:0.2;}
  50%{transform:scale(1.2);opacity:0;}
}

/* Empty States */
.empty-state{
  text-align:center;
  padding:var(--space-16) var(--space-5);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-4);
}
.empty-state-icon{
  width:80px;
  height:80px;
  border-radius:var(--radius-full);
  background:var(--glass);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  color:var(--text-dim);
  opacity:0.5;
  margin-bottom:var(--space-2);
}
.empty-state-title{
  font-size:18px;
  font-weight:700;
  color:var(--text-main);
  margin-bottom:var(--space-1);
}
.empty-state-description{
  font-size:14px;
  color:var(--text-muted);
  max-width:400px;
  line-height:1.6;
}
.empty-state-action{
  margin-top:var(--space-4);
}

/* Progress Bar */
.progress-bar{
  height:6px;
  background:var(--glass);
  border-radius:var(--radius-full);
  overflow:hidden;
  position:relative;
}
.progress-bar .fill{
  height:100%;
  border-radius:var(--radius-full);
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  position:relative;
  overflow:hidden;
}
.progress-bar .fill::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  animation:shimmer 1.5s infinite;
}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0;}
.fermuar-grid{display:flex;flex-wrap:wrap;gap:8px;}
.fermuar-grid .fer-row{display:grid;grid-template-columns:70px 1fr 1fr;gap:6px;align-items:center;width:100%;padding:6px 0;border-bottom:1px solid var(--border);}
.fermuar-grid .fer-row:last-child{border-bottom:none;}
.fermuar-grid .fer-row label{font-size:13px;font-weight:600;}
.fermuar-grid .fer-row input{width:100%;}

@media(max-width:768px){
  .type-filter-bar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .type-chip{flex-shrink:0;}
  .filter-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;}
  .filter-select{flex-shrink:0;min-width:110px;}
  .list-stats{grid-template-columns:repeat(3,1fr);gap:6px;}
  .list-stat-mini{padding:8px 6px;}
  .list-stat-mini .lsm-value{font-size:16px;}
  #page-stok .stats-grid{grid-template-columns:1fr!important;}
}

/* Stock level bar */
.stock-level{height:6px;background:var(--glass);border-radius:10px;overflow:hidden;width:100%;max-width:80px;display:inline-block;vertical-align:middle;}
.stock-level .fill{height:100%;border-radius:10px;transition:width 0.5s;}
.stock-level .fill.green{background:linear-gradient(90deg,#10b981,#34d399);}
.stock-level .fill.yellow{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.stock-level .fill.red{background:linear-gradient(90deg,#ef4444,#f87171);}

.stok-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;border-left:3px solid var(--primary);transition:all 0.2s;}
.stok-card:active{transform:scale(0.99);}
.stok-card.low-stock{border-left-color:#ef4444;}
.stok-card.ok-stock{border-left-color:#10b981;}

/* ===== CALENDAR ===== */
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.cal-header h3{font-size:18px;font-weight:800;}
.cal-nav{display:flex;gap:6px;}
.cal-nav button{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--border);color:var(--text-main);font-size:14px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
.cal-nav button:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-day-name{text-align:center;font-size:10px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;padding:8px 0;}
.cal-day{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);min-height:80px;padding:6px;cursor:pointer;transition:all 0.2s;position:relative;}
.cal-day:hover{border-color:var(--primary);z-index:1;}
.cal-day.today{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow);}
.cal-day.other-month{opacity:0.3;pointer-events:none;}
.cal-day .day-num{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--text-muted);}
.cal-day.today .day-num{color:var(--primary);font-size:14px;}
.cal-event{font-size:9px;padding:2px 5px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-weight:600;transition:all 0.15s;}
.cal-event:hover{filter:brightness(1.3);transform:scale(1.02);}
.cal-event.standart{background:rgba(124,58,237,0.15);color:#a78bfa;}
.cal-event.fermuar{background:rgba(59,130,246,0.15);color:#60a5fa;}
.cal-event.lastik{background:rgba(16,185,129,0.15);color:#34d399;}
.cal-event.dugme{background:rgba(245,158,11,0.15);color:#fbbf24;}
.cal-event.toptan{background:rgba(236,72,153,0.15);color:#f472b6;}

/* ===== NOTIFICATION BELL ===== */
.notif-bell{position:relative;cursor:pointer;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;color:var(--text-main);font-size:16px;transition:all 0.2s;}
.notif-bell:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.notif-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:9px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;animation:notifPulse 2s infinite;}
@keyframes notifPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.notif-panel{display:none;position:absolute;top:50px;right:0;width:340px;background:var(--bg-card-solid);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:90;max-height:400px;overflow-y:auto;animation:modalIn 0.25s;}
.notif-panel.show{display:block;}
.notif-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.notif-header h4{font-size:14px;font-weight:700;}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:flex-start;transition:all 0.2s;cursor:pointer;}
.notif-item:hover{background:var(--glass);}
.notif-item:last-child{border-bottom:none;}
.notif-icon{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.notif-icon.danger{background:rgba(239,68,68,0.12);color:#ef4444;}
.notif-icon.warning{background:rgba(245,158,11,0.12);color:#f59e0b;}
.notif-icon.info{background:rgba(59,130,246,0.12);color:#3b82f6;}
.notif-text{font-size:12px;line-height:1.4;flex:1;}
.notif-text strong{color:var(--text-main);}
.notif-time{font-size:10px;color:var(--text-dim);margin-top:3px;}
.notif-empty{padding:30px;text-align:center;color:var(--text-muted);font-size:13px;}
@media(max-width:768px){.notif-panel{position:fixed;top:60px;left:8px;right:8px;width:auto;}}

/* ===== BULK ACTIONS ===== */
.bulk-bar{display:none;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:var(--radius-sm);padding:10px 16px;margin-bottom:12px;align-items:center;gap:12px;color:#fff;animation:pageIn 0.3s;}
.bulk-bar.show{display:flex;flex-wrap:wrap;}
.bulk-bar .bulk-count{font-weight:700;font-size:14px;white-space:nowrap;}
.bulk-bar .bulk-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.bulk-bar .bulk-btn{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.15);color:#fff;transition:all 0.2s;white-space:nowrap;}
.bulk-bar .bulk-btn:hover{background:rgba(255,255,255,0.3);}
.bulk-bar .bulk-btn.danger{background:rgba(239,68,68,0.6);border-color:rgba(239,68,68,0.8);}
.bulk-bar .bulk-btn.danger:hover{background:#ef4444;}
.bulk-bar .bulk-btn.success{background:rgba(16,185,129,0.6);border-color:rgba(16,185,129,0.8);}
.bulk-bar .bulk-btn.success:hover{background:#10b981;}

/* ===== SELECTION DASHBOARD v14 — MODERN REDESIGN ===== */
.sel-dash{
  display:none;margin-top:16px;
  background:var(--bg-card);
  border:1px solid var(--border);border-radius:12px;padding:0;overflow:hidden;
  animation:sdSlideUp 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:var(--shadow);
}
.sel-dash.show{display:block;}
@keyframes sdSlideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* HEADER — Minimal */
.sel-dash-header{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  padding:12px 16px;display:flex;align-items:center;gap:12px;color:#fff;
  flex-wrap:wrap;
}
.sel-dash-title{
  font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;
}
.sel-dash-title i{font-size:16px;}
.sel-dash-subtitle{font-size:12px;opacity:0.9;flex:1;font-weight:500;}
.sel-dash-close{
  background:rgba(255,255,255,0.2);
  border:none;color:#fff;
  width:44px;height:44px;min-width:44px;min-height:44px;border-radius:8px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;margin-left:auto;
}
.sel-dash-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.05);}

/* SELECTED ITEMS LIST — Compact chips */
.sd-selected-list{
  padding:12px 16px;display:flex;gap:6px;flex-wrap:wrap;
  background:var(--glass);
  border-bottom:1px solid var(--border);
  max-height:120px;overflow-y:auto;
}
.sd-sel-tag{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:16px;font-size:11px;font-weight:600;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-main);
  transition:all 0.2s;
}
.sd-sel-tag:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  border-color:var(--primary);
}
.sd-sel-tag-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}

/* COMPACT SUMMARY — Single row stats */
.sd-summary-compact{
  display:flex;gap:16px;padding:12px 16px;
  flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--border);
}
.sd-stat{
  display:flex;align-items:center;gap:6px;
  font-size:13px;
}
.sd-stat-label{
  color:var(--text-muted);font-weight:500;
}
.sd-stat-value{
  color:var(--text-main);font-weight:800;font-size:16px;
}
.sd-stat-success .sd-stat-value{color:#10b981;}
.sd-stat-warning .sd-stat-value{color:#f59e0b;}

/* GRID — Compact */
.sel-dash-grid, .sd-summary-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;padding:12px 16px;
}
.sel-dash-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;padding:12px;
  text-align:center;
  transition:all 0.2s;
}
.sel-dash-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  border-color:var(--primary);
}
  box-shadow:0 12px 28px -8px rgba(99,102,241,0.25);
  border-color:transparent;
}
.sel-dash-card:hover::before{transform:scaleX(1);}
.sel-dash-card:hover::after{opacity:1;}
.sd-icon{
  font-size:18px;margin-bottom:6px;
  width:36px;height:36px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass);
}
.sd-value{
  font-size:20px;font-weight:800;color:var(--text-main);line-height:1.1;
}
.sd-label{
  font-size:10px;color:var(--text-muted);font-weight:600;
  text-transform:uppercase;letter-spacing:0.5px;margin-top:4px;
}

/* COLOR VARIANTS — Simplified */
.sd-total .sd-value{color:#6366f1;}
.sd-total .sd-icon{background:rgba(99,102,241,0.1);color:#6366f1;}

.sd-green .sd-value{color:#10b981;}
.sd-green .sd-icon{background:rgba(16,185,129,0.1);color:#10b981;}

.sd-amber .sd-value{color:#f59e0b;}
.sd-amber .sd-icon{background:rgba(245,158,11,0.1);color:#f59e0b;}

.sd-purple .sd-value{color:#8b5cf6;}
.sd-purple .sd-icon{background:rgba(139,92,246,0.1);color:#8b5cf6;}

.sd-pink .sd-value{color:#ec4899;}
.sd-pink .sd-icon{background:rgba(236,72,153,0.1);color:#ec4899;}

.sd-teal .sd-value{color:#14b8a6;}
.sd-teal .sd-icon{background:rgba(20,184,166,0.1);color:#14b8a6;}

.sd-blue .sd-value{color:#3b82f6;}
.sd-blue .sd-icon{background:rgba(59,130,246,0.1);color:#3b82f6;}

/* SECTIONS — Compact */
.sd-section{
  margin:0 16px;padding:12px 0;
  border-top:1px solid var(--border);
}
.sd-section:first-of-type{border-top:none;padding-top:0;}
.sd-section-title{
  font-size:12px;font-weight:700;color:var(--text-main);
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.sd-title-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;font-size:14px;
}
.sd-icon-box{background:var(--primary);color:#fff;}
.sd-icon-bant{background:linear-gradient(135deg,#ec4899,#f472b6);color:#fff;}
.sd-icon-fermuar{background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff;}
.sd-icon-lastik{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;}
.sd-icon-dugme{background:linear-gradient(135deg,#10b981,#34d399);color:#fff;}
.sd-icon-toptan{background:linear-gradient(135deg,#ef4444,#f87171);color:#fff;}

/* SIZE GRID & CARDS */
.sd-size-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-top:12px;
}
.sd-size-card{
  background:linear-gradient(135deg,rgba(99,102,241,0.05),rgba(139,92,246,0.03));
  border:1px solid rgba(99,102,241,0.15);
  border-radius:12px;padding:16px;
  transition:all 0.3s ease;
  position:relative;overflow:hidden;
}
.sd-size-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:linear-gradient(90deg,#6366f1,#8b5cf6);
  opacity:0;transition:opacity 0.3s;
}
.sd-size-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px -4px rgba(99,102,241,0.25);
  border-color:rgba(99,102,241,0.3);
}
.sd-size-card:hover::before{opacity:1;}
.sd-size-name{
  font-size:11px;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;
  letter-spacing:0.5px;margin-bottom:8px;
}
.sd-size-value{
  font-size:28px;font-weight:800;
  color:var(--primary);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
[data-theme="dark"] .sd-size-card{
  background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.05));
  border-color:rgba(99,102,241,0.2);
}
[data-theme="dark"] .sd-size-card:hover{
  border-color:rgba(99,102,241,0.4);
}

/* TABLE — Premium look */
.sd-table-wrap{
  overflow-x:auto;border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 4px 16px -4px rgba(0,0,0,0.06);
  background:var(--bg-card);
}
.sd-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:13px;white-space:nowrap;
}
.sd-table th{
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
  color:var(--text-main);font-weight:700;padding:14px 16px;
  text-align:center;border-bottom:2px solid #e2e8f0;
  font-size:12px;line-height:1.4;position:sticky;top:0;z-index:2;
}
[data-theme="dark"] .sd-table th{
  background:linear-gradient(180deg,#1e293b,#0f172a);
  color:#e2e8f0;border-bottom-color:#334155;
}
.sd-table .sd-th-first{
  text-align:left;min-width:120px;
  background:linear-gradient(180deg,#f1f5f9,#e2e8f0)!important;
}
[data-theme="dark"] .sd-table .sd-th-first{background:linear-gradient(180deg,#0f172a,#020617)!important;}
.sd-th-no{font-weight:800;font-size:12px;color:#6366f1;letter-spacing:-0.2px;}
.sd-th-model{font-weight:500;font-size:10px;color:var(--text-muted);margin-top:3px;}
.sd-th-atolye{
  font-weight:600;font-size:9px;color:#8b5cf6;opacity:0.8;margin-top:3px;
  text-transform:uppercase;letter-spacing:0.5px;
}
.sd-table td{
  padding:11px 16px;text-align:center;
  border-bottom:1px solid #f1f5f9;color:var(--text-main);
  font-variant-numeric:tabular-nums;
  transition:background 0.15s;
}
[data-theme="dark"] .sd-table td{border-bottom-color:#1e293b;}
.sd-table tbody tr{transition:background 0.2s;}
.sd-table tbody tr:hover{background:rgba(99,102,241,0.04);}
.sd-table tbody tr:hover td{color:var(--text-main);}
.sd-table tbody tr:last-child td{border-bottom:none;}
.sd-cell-value{font-weight:700;color:var(--text-main)!important;}
.sd-cell-empty{color:var(--text-muted)!important;opacity:0.35;font-weight:400;}
.sd-size-label{
  font-weight:700;color:var(--text-main);text-align:left!important;
  padding-left:18px!important;background:rgba(99,102,241,0.02);
}
.sd-size-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 14px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff!important;
  border-radius:24px;font-size:11px;font-weight:700;
  box-shadow:0 2px 8px -2px rgba(99,102,241,0.4);
  letter-spacing:0.3px;
}
.sd-bant-genis{color:#db2777;font-weight:700;}
.sd-bant-dar{color:#7c3aed;font-weight:700;}
.sd-bant-kilcik{color:#0d9488;font-weight:700;}

/* TOPLAM column */
.sd-total-col{
  background:linear-gradient(180deg,rgba(245,158,11,0.1),rgba(245,158,11,0.04))!important;
  font-weight:800!important;color:#d97706!important;
  border-left:2px solid rgba(245,158,11,0.2);
}
.sd-table th.sd-total-col{
  background:linear-gradient(180deg,#fef3c7,#fde68a)!important;
  color:#92400e!important;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="dark"] .sd-table th.sd-total-col{
  background:linear-gradient(180deg,#78350f,#451a03)!important;
  color:#fde68a!important;text-shadow:none;
}

/* GRAND TOTAL row */
.sd-grand-total td{
  background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(139,92,246,0.08))!important;
  font-size:14px;font-weight:800;
  border-top:2px solid rgba(99,102,241,0.3)!important;
  padding-top:14px!important;padding-bottom:14px!important;
  color:#4f46e5!important;
}
.sd-grand-total .sd-size-label{
  background:linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.1))!important;
  font-size:13px;font-weight:800;color:#4f46e5!important;
}
.sd-grand-num{
  font-size:18px!important;font-weight:900!important;
  color:#fff!important;
  background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
  border-left:none!important;
}

/* FOOTER */
.sel-dash-footer{
  background:linear-gradient(135deg,rgba(99,102,241,0.04),rgba(245,158,11,0.03));
  padding:16px 28px;display:flex;gap:24px;flex-wrap:wrap;
  font-size:13px;color:var(--text-main);
  border-top:1px solid var(--border);
}
.sel-dash-footer i{margin-right:6px;color:var(--primary);}

/* DARK MODE */
[data-theme="dark"] .sel-dash{box-shadow:0 20px 60px -15px rgba(99,102,241,0.4);}
[data-theme="dark"] .sd-section{border-top-color:#334155;}

/* MOBILE */
@media(max-width:768px){
  .sd-summary-row{grid-template-columns:repeat(2,1fr);gap:10px;padding:16px 16px 6px;}
  .sel-dash-card{padding:12px 10px;}
  .sel-dash-card .sd-value{font-size:20px;}
  .sd-icon{width:36px;height:36px;font-size:16px;margin-bottom:6px;}
  .sd-section{margin:0 16px;padding:16px 0;}
  .sd-section-title{font-size:13px;}
  .sd-table{font-size:11px;}
  .sd-table th,.sd-table td{padding:8px 10px;}
  .sd-size-badge{font-size:10px;padding:3px 10px;}
  .sel-dash-footer{padding:12px 16px;gap:12px;font-size:11px;}
  .sel-dash-header{padding:16px 18px;}
  .sel-dash-title{font-size:15px;}
  .sd-selected-list{padding:12px 16px;}
  .sd-size-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .sd-size-card{padding:12px;}
  .sd-size-value{font-size:22px;}
  .sd-size-name{font-size:10px;}
}

/* PRINT */
@media print{
  .sel-dash{box-shadow:none;border:1px solid #ddd;}
  .sel-dash::before{background:#6366f1;animation:none;}
  .sel-dash-close{display:none;}
}

/* ===== EXPORT BAR ===== */
.export-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.export-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--glass);color:var(--text-main);transition:all 0.2s;}
.export-btn:hover{border-color:var(--primary);background:var(--primary);color:#fff;}
.export-btn i{font-size:13px;}

/* Checkbox styling */
.bulk-check{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;}

/* ===== DATE RANGE ===== */
.date-range-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.date-range-row label{font-size:11px;color:var(--text-muted);font-weight:600;}
.date-range-row input[type="date"]{padding:6px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);font-size:12px;font-family:inherit;}
.date-range-row input[type="date"]:focus{outline:none;border-color:var(--primary);}

@media(max-width:768px){
  .bulk-bar{padding:8px 12px;gap:8px;}
  .export-bar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;}
  .export-btn{flex-shrink:0;}
  .date-range-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;}
  .date-range-row input[type="date"]{flex-shrink:0;min-width:130px;}
}
.cal-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.cal-legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);font-weight:600;}
.cal-legend-dot{width:10px;height:10px;border-radius:50%;}
.cal-event-list{margin-top:16px;}
.cal-event-detail{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;cursor:pointer;transition:all 0.2s;}
.cal-event-detail:hover{border-color:var(--primary);transform:translateX(4px);}
@media(max-width:768px){
  .cal-day{min-height:50px;padding:3px;}
  .cal-day .day-num{font-size:10px;}
  .cal-event{font-size:7px;padding:1px 3px;}
  .cal-grid{gap:2px;}
}

/* ===== PROFESSIONAL DASHBOARD CSS ===== */
/* ===== DASHBOARD CARDS - ENHANCED ===== */
.db-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  padding:22px 24px;
  background:linear-gradient(135deg,rgba(124,58,237,0.1),rgba(245,158,11,0.05));
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.db-hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  opacity:0.6;
}
.db-hero-left{display:flex;flex-direction:column;gap:5px}
.db-greeting{
  font-size:22px;
  font-weight:800;
  color:var(--text-main);
  letter-spacing:-0.5px;
}
.db-date{
  font-size:13px;
  color:var(--text-muted);
  font-weight:600;
}
.db-hero-right{display:flex;align-items:center;gap:12px}
.db-live-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 14px;
  border-radius:20px;
  font-size:12.5px;
  font-weight:700;
  background:rgba(16,185,129,0.15);
  color:#10b981;
  border:1px solid rgba(16,185,129,0.25);
  box-shadow:0 2px 8px rgba(16,185,129,0.15);
}
.db-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#10b981;
  animation:livePulse 2s ease-in-out infinite;
  box-shadow:0 0 8px rgba(16,185,129,0.6);
}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.9)}}

.db-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
.db-kpi-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg-card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  cursor:pointer;
  transition:all var(--transition-base);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.db-kpi-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--kpi-color,var(--primary));
  opacity:0.7;
  transition:all var(--transition-base);
}
.db-kpi-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--kpi-color),transparent);
  opacity:0;
  transition:opacity var(--transition-base);
}
.db-kpi-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--kpi-color,var(--primary));
}
.db-kpi-card:hover::before{opacity:1;height:4px;}
.db-kpi-card:hover::after{opacity:0.05;}
.db-kpi-icon{
  width:50px;
  height:50px;
  border-radius:14px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  background:var(--kpi-bg,rgba(124,58,237,0.12));
  color:var(--kpi-color,var(--primary));
  transition:all var(--transition-base);
  box-shadow:0 4px 12px var(--kpi-color);
  opacity:0.9;
}
.db-kpi-card:hover .db-kpi-icon{
  transform:scale(1.1) rotate(-5deg);
  opacity:1;
}
.db-kpi-body{flex:1;min-width:0}
.db-kpi-value{
  font-size:30px;
  font-weight:900;
  line-height:1;
  color:var(--kpi-color,var(--primary));
  letter-spacing:-1px;
}
.db-kpi-label{
  font-size:12.5px;
  color:var(--text-muted);
  font-weight:600;
  margin-top:4px;
  letter-spacing:0.2px;
}
.db-kpi-sub{
  font-size:10.5px;
  color:var(--text-dim);
  margin-top:3px;
}
.db-kpi-purple{--kpi-color:var(--primary);--kpi-bg:rgba(124,58,237,0.12)}
.db-kpi-amber{--kpi-color:#f59e0b;--kpi-bg:rgba(245,158,11,0.12)}
.db-kpi-green{--kpi-color:#10b981;--kpi-bg:rgba(16,185,129,0.12)}
.db-kpi-red{--kpi-color:#ef4444;--kpi-bg:rgba(239,68,68,0.12)}

.db-mini-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px;}
.db-mini-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px 10px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg-card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  cursor:pointer;
  transition:all var(--transition-base);
  text-align:center;
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.db-mini-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--primary-glow),transparent);
  opacity:0;
  transition:opacity var(--transition-base);
}
.db-mini-card:hover{
  transform:translateY(-3px) scale(1.03);
  border-color:var(--primary);
  box-shadow:var(--shadow-card-hover);
}
.db-mini-card:hover::before{opacity:1;}
.db-mini-icon{
  width:40px;
  height:40px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  transition:all var(--transition-base);
  position:relative;
  z-index:1;
}
.db-mini-card:hover .db-mini-icon{
  transform:scale(1.15) rotate(5deg);
}
.db-mini-val{
  font-size:24px;
  font-weight:900;
  color:var(--text-main);
  letter-spacing:-0.5px;
  position:relative;
  z-index:1;
}
.db-mini-lbl{
  font-size:10.5px;
  color:var(--text-muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  position:relative;
  z-index:1;
}
.db-mid-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-bottom:14px;}
.db-bot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px;}
.db-recent-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all 0.15s;}
.db-recent-item:last-child{border-bottom:none}
.db-recent-item:hover{padding-left:4px}
.db-recent-no{font-size:11px;font-weight:800;font-family:ui-monospace,monospace;min-width:70px;}
.db-recent-body{flex:1;min-width:0}
.db-recent-model{font-size:13px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.db-recent-meta{font-size:11px;color:var(--text-muted)}
.db-legend-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.db-legend-item:last-child{border-bottom:none}
.db-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.db-legend-label{font-size:13px;font-weight:500;flex:1}
.db-legend-val{font-size:15px;font-weight:800}
.db-legend-pct{font-size:11px;color:var(--text-dim);min-width:32px;text-align:right}
.db-termin-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all 0.15s;}
.db-termin-item:last-child{border-bottom:none}
.db-termin-item:hover{padding-left:4px}
.db-termin-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.db-termin-body{flex:1;min-width:0}
.db-termin-no{font-size:11px;font-weight:700;font-family:ui-monospace,monospace;color:var(--primary)}
.db-termin-date{font-size:11px;color:var(--text-muted)}
.db-termin-days{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;flex-shrink:0}
.db-termin-days.overdue{background:rgba(239,68,68,0.12);color:#ef4444}
.db-termin-days.soon{background:rgba(245,158,11,0.12);color:#f59e0b}
.db-termin-days.ok{background:rgba(16,185,129,0.12);color:#10b981}
.db-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.db-quick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px 8px;border-radius:12px;border:1px solid var(--border);background:var(--glass);font-size:12px;font-weight:700;cursor:pointer;color:var(--text-main);transition:all 0.2s;}
.db-quick-btn i{font-size:18px}
.db-quick-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.db-qb-purple:hover{background:rgba(124,58,237,0.12);border-color:var(--primary);color:var(--primary)}
.db-qb-blue:hover{background:rgba(59,130,246,0.12);border-color:#3b82f6;color:#3b82f6}
.db-qb-green:hover{background:rgba(16,185,129,0.12);border-color:#10b981;color:#10b981}
.db-qb-amber:hover{background:rgba(245,158,11,0.12);border-color:#f59e0b;color:#f59e0b}
.db-qb-pink:hover{background:rgba(236,72,153,0.12);border-color:#ec4899;color:#ec4899}
.db-qb-teal:hover{background:rgba(20,184,166,0.12);border-color:#14b8a6;color:#14b8a6}
@media(max-width:1100px){.db-kpi-row{grid-template-columns:repeat(2,1fr)}.db-mini-row{grid-template-columns:repeat(3,1fr)}.db-mid-grid{grid-template-columns:1fr}.db-bot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.db-hero{flex-direction:column;align-items:flex-start;gap:10px}.db-kpi-row{grid-template-columns:repeat(2,1fr);gap:8px}.db-kpi-value{font-size:22px}.db-mini-row{grid-template-columns:repeat(3,1fr)}.db-mid-grid{grid-template-columns:1fr}.db-bot-grid{grid-template-columns:1fr}.db-quick-grid{grid-template-columns:repeat(3,1fr)}}


/* ===== PAKET 4: Dashboard Enrichment ===== */
.db-compare-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media(max-width:768px){.db-compare-row{grid-template-columns:1fr}}
.db-compare-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden;transition:all .25s}
.db-compare-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.db-compare-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--primary)}
.db-compare-card.up::before{background:#10b981}
.db-compare-card.down::before{background:#ef4444}
.db-cc-label{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.db-cc-val{font-size:26px;font-weight:800;color:var(--text-main);line-height:1}
.db-cc-sub{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600}
.db-cc-sub.up{color:#10b981}.db-cc-sub.down{color:#ef4444}.db-cc-sub.flat{color:var(--text-muted)}
.db-cc-prev{font-size:11px;color:var(--text-muted);margin-top:4px;font-weight:500}

/* Top 3 Atölye */
.db-top-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.db-top-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--glass);border:1px solid var(--border);border-radius:10px;transition:all .2s}
.db-top-item:hover{background:rgba(124,58,237,.06);transform:translateX(4px)}
.db-top-rank{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex-shrink:0}
.db-top-rank.r1{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.db-top-rank.r2{background:linear-gradient(135deg,#cbd5e1,#94a3b8)}
.db-top-rank.r3{background:linear-gradient(135deg,#d97706,#92400e)}
.db-top-name{flex:1;font-weight:600;font-size:13px;color:var(--text-main)}
.db-top-count{font-weight:700;color:var(--primary);font-size:14px}
.db-top-bar{height:4px;background:var(--glass);border-radius:2px;margin-top:6px;overflow:hidden}
.db-top-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#a78bfa);border-radius:2px;transition:width .6s}

/* Günlük Hedef */
.db-goal-card{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(167,139,250,.04));border:1px solid var(--border);border-radius:14px;padding:16px}
.db-goal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.db-goal-title{font-size:13px;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:8px}
.db-goal-edit{background:var(--glass);border:1px solid var(--border);padding:4px 10px;border-radius:8px;font-size:11px;cursor:pointer;color:var(--text-muted);font-weight:600}
.db-goal-edit:hover{background:rgba(124,58,237,.1);color:var(--primary)}
.db-goal-progress-wrap{background:var(--glass);border-radius:10px;height:24px;overflow:hidden;position:relative;border:1px solid var(--border)}
.db-goal-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),#a78bfa);border-radius:10px;transition:width .8s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-weight:700;font-size:11px;min-width:30px}
.db-goal-progress-fill.done{background:linear-gradient(90deg,#10b981,#34d399)}
.db-goal-stats{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--text-muted);font-weight:600}
.db-goal-stats b{color:var(--text-main);font-size:14px}

/* Pin Favorites */
.pin-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;transition:all .2s;padding:4px}
.pin-btn:hover{color:#f59e0b;transform:scale(1.2)}
.pin-btn.pinned{color:#f59e0b}
.db-pinned-card{background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(251,191,36,.03));border:1px solid rgba(245,158,11,.2);border-radius:14px;padding:14px}
.db-pinned-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-bottom:10px;color:var(--text-main)}
.db-pinned-title i{color:#f59e0b}
.db-pinned-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:all .2s;font-size:12px}
.db-pinned-item:hover{border-color:#f59e0b;transform:translateX(3px)}
.db-pinned-item .no{font-weight:700;color:var(--primary);min-width:60px}
.db-pinned-item .model{flex:1;color:var(--text-main)}
.db-pinned-empty{text-align:center;padding:16px;color:var(--text-muted);font-size:12px;font-style:italic}


/* ==== PAKET 5: EXPORT & SHARE ==== */
@media print {
  .sidebar, .topbar, .bottom-nav, .fab, .bulk-bar, .filter-bar,
  .search-global, .theme-toggle, .notif-bell, .btn, .menu-btn,
  .sidebar-overlay, .modal-overlay:not(.show), #toastContainer,
  .bulk-check, .sd-close, .type-chip-wrap, .shortcuts-modal { display: none !important; }
  .main { margin-left: 0 !important; padding: 0 !important; }
  .page { display: block !important; page-break-after: always; }
  .page:not(.active) { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card, .stat-card, .kpi-card { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; }
  table { font-size: 11px !important; }
  a { color: #000 !important; text-decoration: none !important; }
  h1, h2, h3 { color: #000 !important; }
}

/* Share Menu */
.share-menu {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000;
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(4px);
}
.share-menu.show { display: flex; animation: fadeIn 0.2s; }
.share-menu-content {
  background: var(--bg-card, #fff); border-radius: 18px; padding: 24px;
  max-width: 420px; width: 100%; border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.share-menu-title {
  font-size: 17px; font-weight: 700; margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-main);
}
.share-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.share-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; background: var(--glass); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; transition: all 0.2s;
  color: var(--text-main); font-size: 12px; font-weight: 600; text-align: center;
}
.share-opt:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 6px 18px rgba(124,58,237,0.15); }
.share-opt i { font-size: 22px; }
.share-opt.wa i { color: #25D366; }
.share-opt.mail i { color: #ea4335; }
.share-opt.copy i { color: #7c3aed; }
.share-opt.print i { color: #3b82f6; }
.share-opt.pdf i { color: #ef4444; }
.share-opt.download i { color: #10b981; }

/* Backup panel */
.backup-panel {
  background: var(--glass); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; margin-top: 12px;
}
.backup-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.backup-info {
  font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 8px;
  padding: 10px; background: rgba(124,58,237,0.06); border-radius: 8px;
  border-left: 3px solid var(--primary);
}


/* ==== PAKET 6: PERFORMANCE ==== */
/* Pagination */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin: 20px 0 10px; flex-wrap: wrap;
}
.pagination button {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--border);
  color: var(--text-main); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: all 0.18s; display: inline-flex; align-items: center; justify-content: center;
}
.pagination button:hover:not(:disabled) {
  background: var(--primary); color: #fff; border-color: var(--primary);
  transform: translateY(-1px);
}
.pagination button.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(124,58,237,0.35);
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-info {
  text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 6px;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skel { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* PWA install banner */
.pwa-banner {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(124,58,237,0.4);
  display: none; align-items: center; gap: 12px; z-index: 9998;
  font-size: 13px; font-weight: 600; max-width: 340px;
}
.pwa-banner.show { display: flex; animation: slideUpFade 0.4s; }
@keyframes slideUpFade { from{opacity:0;transform:translate(-50%,20px);} to{opacity:1;transform:translate(-50%,0);} }
.pwa-banner button {
  background: #fff; color: var(--primary); border: none;
  padding: 6px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 12px;
}
.pwa-banner .close {
  background: rgba(255,255,255,0.2); color: #fff; width: 28px; height: 28px; padding: 0;
}

/* Storage usage bar */
.storage-bar {
  height: 8px; background: var(--glass); border-radius: 10px; overflow: hidden;
  margin-top: 8px; border: 1px solid var(--border);
}
.storage-bar .fill {
  height: 100%; transition: width 0.4s;
  background: linear-gradient(90deg, #10b981, #059669);
}
.storage-bar .fill.warning { background: linear-gradient(90deg, #f59e0b, #d97706); }
.storage-bar .fill.danger { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* Offline indicator */
.offline-indicator {
  position: fixed; top: 70px; right: 16px; z-index: 9999;
  background: #ef4444; color: #fff; padding: 8px 14px;
  border-radius: 10px; font-size: 12px; font-weight: 600;
  display: none; align-items: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(239,68,68,0.4);
}
.offline-indicator.show { display: inline-flex; animation: slideUpFade 0.3s; }
.offline-indicator .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }


/* ======= REPORTS v13 ======= */
.rep-kpi{display:flex;align-items:center;gap:14px;padding:16px;}
.rep-kpi-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.rep-kpi-val{font-size:26px;font-weight:700;line-height:1.1;}
.rep-kpi-lbl{font-size:12px;color:var(--text-muted);margin-top:2px;}
.rep-stat{padding:18px;border-radius:12px;text-align:center;}
.rep-stat-val{font-size:28px;font-weight:700;}
.rep-stat-lbl{font-size:12px;color:var(--text-muted);margin-top:4px;}
.rep-range-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.rep-tab{animation:fadeIn 0.3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media print{
  .sidebar,.topbar,.filter-bar,.rep-range-btn,button{display:none !important;}
  .main{margin-left:0 !important;}
  .rep-tab{display:block !important;page-break-inside:avoid;}
  .card{break-inside:avoid;}
}

/* ===== SETTINGS PAGE v2 ===== */
.settings-tabs{display:flex;gap:6px;overflow-x:auto;padding:6px;background:var(--glass);border:1px solid var(--border);border-radius:14px;margin-bottom:20px;scrollbar-width:none;}
.settings-tabs::-webkit-scrollbar{display:none;}
.s-tab{flex:1;min-width:fit-content;padding:10px 16px;background:transparent;border:none;color:var(--text-muted);font-weight:600;font-size:13px;cursor:pointer;border-radius:10px;display:flex;align-items:center;gap:8px;justify-content:center;white-space:nowrap;transition:all 0.2s;}
.s-tab:hover{color:var(--text-main);background:rgba(255,255,255,0.04);}
.s-tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 14px rgba(124,58,237,0.3);}
.s-tab i{font-size:13px;}

.s-panel{display:none;animation:sFadeIn 0.35s;}
.s-panel.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;}
@keyframes sFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.s-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px;transition:all 0.25s;position:relative;overflow:hidden;}
.s-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12);}
.s-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:0;transition:opacity 0.3s;}
.s-card:hover::before{opacity:1;}
.s-card.danger-zone{border-color:rgba(239,68,68,0.25);}
.s-card.danger-zone:hover{border-color:#ef4444;box-shadow:0 8px 24px rgba(239,68,68,0.15);}

.s-card-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.s-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.s-card-head h3{font-size:15px;font-weight:700;margin:0 0 2px 0;color:var(--text-main);}
.s-card-head p{font-size:12px;color:var(--text-muted);margin:0;line-height:1.4;}
.s-body{}

.s-toggle-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;cursor:pointer;}
.s-toggle-row:last-child{border-bottom:none;}
.s-switch{position:relative;width:42px;height:24px;}
.s-switch input{opacity:0;width:0;height:0;}
.s-switch span{position:absolute;inset:0;background:rgba(148,163,184,0.3);border-radius:999px;transition:0.25s;cursor:pointer;}
.s-switch span::before{content:'';position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;left:3px;transition:0.25s;box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.s-switch input:checked+span{background:linear-gradient(135deg,var(--primary),var(--primary-dark));}
.s-switch input:checked+span::before{transform:translateX(18px);}

.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;}
.theme-card{background:var(--glass);border:2px solid var(--border);border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;}
.theme-card:hover{border-color:var(--primary);transform:translateY(-2px);}
.theme-card.active{border-color:var(--primary);background:rgba(124,58,237,0.08);}
.theme-card.active .tc-check{opacity:1;transform:scale(1);}
.tc-preview{width:36px;height:36px;border-radius:10px;margin:0 auto 8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.tc-name{font-size:12px;font-weight:600;color:var(--text-main);}
.tc-check{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.5);transition:0.2s;}

.s-mode-toggle{display:flex;gap:6px;background:var(--glass);padding:4px;border:1px solid var(--border);border-radius:12px;}
.s-mode-btn{flex:1;padding:10px;background:transparent;border:none;color:var(--text-muted);font-weight:600;font-size:12px;cursor:pointer;border-radius:9px;display:flex;align-items:center;gap:6px;justify-content:center;transition:0.2s;}
.s-mode-btn:hover{color:var(--text-main);}
.s-mode-btn.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 3px 10px rgba(124,58,237,0.3);}

.s-hint{margin-top:10px;padding:10px 12px;background:var(--glass);border-left:3px solid var(--primary);border-radius:8px;font-size:11px;color:var(--text-muted);display:flex;gap:8px;align-items:flex-start;line-height:1.5;}
.s-hint i{margin-top:1px;color:var(--primary);}
.s-hint code{background:rgba(124,58,237,0.1);padding:1px 6px;border-radius:4px;font-size:10px;color:var(--primary);}
.s-hint.s-warn{border-left-color:#f59e0b;}
.s-hint.s-warn i{color:#f59e0b;}
.s-hint.s-danger{border-left-color:#ef4444;background:rgba(239,68,68,0.05);}
.s-hint.s-danger i{color:#ef4444;}

.s-feat{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border);font-size:13px;}
.s-feat:last-child{border-bottom:none;}
.s-feat-tag{margin-left:auto;font-size:10px;padding:3px 8px;background:rgba(124,58,237,0.1);color:var(--primary);border-radius:6px;font-weight:600;}

.s-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:var(--glass);border:1px solid var(--border);border-radius:8px;font-size:11px;color:var(--text-muted);font-weight:600;}
.s-badge i{color:var(--primary);font-size:10px;}

.s-kbd-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.s-kbd-row:last-child{border-bottom:none;}
.s-kbd-row kbd{background:var(--glass);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;color:var(--text-main);min-width:22px;display:inline-block;text-align:center;margin:0 2px;font-family:inherit;}

@media(max-width:768px){
  .settings-tabs{gap:3px;padding:4px;}
  .s-tab{padding:8px 12px;font-size:12px;}
  .s-tab span{display:none;}
  .s-tab i{font-size:15px;}
  .s-panel.active{grid-template-columns:1fr;gap:12px;}
  .theme-grid{grid-template-columns:repeat(3,1fr);}
}

/* ============================================
   🎯 MOBIL & MASAÜSTÜ OPTİMİZASYON (v15)
   ============================================ */

/* ---------- Genel iyileştirmeler ---------- */
*,*::before,*::after{-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;overscroll-behavior-y:contain;}
img,svg,video{max-width:100%;height:auto;}

/* Touch targets - iOS HIG minimum 44x44 */
@media (hover:none) and (pointer:coarse){
  button,.btn,.s-tab,.nav-item,.tag,input[type=checkbox],input[type=radio],select,
  .theme-card,.mode-btn,.toggle-switch,a.btn,.sidebar-nav a{
    min-height:44px;
  }
  button,.btn,a.btn{touch-action:manipulation;}
  /* iOS focus zoom önleme */
  input,select,textarea{font-size:16px !important;}
}

/* ---------- Masaüstü: geniş ekran optimizasyonu ---------- */
@media (min-width:1400px){
  .container,.main-container,main{max-width:1400px;margin:0 auto;}
  .kpi-grid,.stats-grid{grid-template-columns:repeat(4,1fr) !important;}
  .form-grid{gap:20px;}
}
@media (min-width:1800px){
  .container,.main-container,main{max-width:1600px;}
  body{font-size:15px;}
}

/* Masaüstü hover efektleri sadece gerçek hover cihazlarında */
@media (hover:hover){
  .card:hover,.kpi-card:hover,.mini-card:hover{transform:translateY(-2px);transition:transform .2s ease;}
}

/* ---------- Tablet (768-1024px) ---------- */
@media (min-width:769px) and (max-width:1024px){
  .kpi-grid,.stats-grid{grid-template-columns:repeat(2,1fr) !important;}
  .form-grid{grid-template-columns:repeat(2,1fr) !important;}
  .sidebar{width:220px !important;}
  .container{padding:16px !important;}
}

/* ---------- Mobil: genel (≤768px) ---------- */
@media (max-width:768px){
  /* Temel spacing */
  body{font-size:14px;}
  .container,main,.page{padding:12px !important;}

  /* Grid reset */
  .kpi-grid,.stats-grid,.form-grid,.mini-grid,.card-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* Kartlar */
  .card,.kpi-card,.mini-card{padding:14px !important;border-radius:12px !important;}
  .card h2,.card h3{font-size:16px !important;}

  /* Başlıklar */
  h1{font-size:22px !important;}
  h2{font-size:18px !important;}
  h3{font-size:15px !important;}

  /* Butonlar - tam genişlik group */
  .btn-group,.actions{flex-wrap:wrap !important;gap:8px !important;}
  .btn-group .btn,.actions .btn{flex:1 1 auto;min-width:120px;}

  /* Modal tam ekran mobilde */
  .modal,.popup,.dialog{
    width:100% !important;
    max-width:100% !important;
    height:100vh !important;
    max-height:100vh !important;
    border-radius:0 !important;
    margin:0 !important;
  }
  .modal-content{padding:16px !important;}

  /* Toast notifications mobilde */
  .toast-container{left:12px !important;right:12px !important;bottom:12px !important;top:auto !important;}
  .toast{width:100% !important;max-width:none !important;}

  /* Arama/Global search */
  .search-box,.global-search{width:100% !important;}

  /* Tablo - horizontal scroll ile */
  .table-wrap,.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:500px;font-size:13px;}
  th,td{padding:8px 10px !important;white-space:nowrap;}

  /* Sidebar - offcanvas tarzı */
  .sidebar{
    position:fixed !important;
    left:-280px;
    top:0;
    height:100vh !important;
    width:260px !important;
    z-index:9998;
    transition:left .3s ease;
    box-shadow:4px 0 20px rgba(0,0,0,.2);
  }
  .sidebar.open{left:0;}
  .sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9997;
  }
  .sidebar.open ~ .sidebar-backdrop{display:block;}

  /* Form alanları */
  .form-row{flex-direction:column !important;gap:10px !important;}
  input,select,textarea{width:100% !important;padding:10px 12px !important;}
  label{font-size:13px !important;}

  /* Ayarlar sekmeleri */
  .s-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .s-tabs::-webkit-scrollbar{display:none;}
  .s-tab{flex-shrink:0;}

  /* Theme grid 2 sütun */
  .theme-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;}
  .theme-card{padding:10px !important;}
  .theme-preview{height:60px !important;}

  /* Mode toggle dikey */
  .mode-toggle{flex-direction:column;}
  .mode-btn{width:100%;}

  /* KPI değerleri */
  .kpi-value,.stat-value{font-size:22px !important;}
  .kpi-icon,.stat-icon{width:36px !important;height:36px !important;font-size:16px !important;}

  /* Tags */
  .tag{font-size:11px !important;padding:4px 8px !important;}

  /* Header */
  .topbar,.header{padding:10px 12px !important;flex-wrap:wrap;gap:8px;}
  .logo{font-size:16px !important;}

  /* Fixed bottom action bar için güvenli alan */
  .content,main{padding-bottom:80px !important;}
}

/* ---------- Küçük mobil (≤480px) ---------- */
@media (max-width:480px){
  .container,main,.page{padding:8px !important;}
  .card,.kpi-card{padding:12px !important;}
  .btn{padding:10px 14px !important;font-size:13px !important;}
  h1{font-size:20px !important;}
  .kpi-value{font-size:20px !important;}
  /* Theme grid 1 sütun */
  .theme-grid{grid-template-columns:1fr !important;}
  /* Dashboard KPI tek sütun */
  .dashboard-grid{grid-template-columns:1fr !important;}
}

/* ---------- Landscape mobil ---------- */
@media (max-width:900px) and (orientation:landscape){
  .modal{height:100vh !important;}
  .sidebar{width:240px !important;}
}

/* ---------- Ultra-wide ---------- */
@media (min-width:2000px){
  html{font-size:17px;}
}

/* ---------- Print optimize ---------- */
@media print{
  .sidebar,.topbar,.header,.btn,.no-print,.toast-container,
  .search-box,.theme-toggle,.shortcuts-modal{display:none !important;}
  .container,main{max-width:100% !important;padding:0 !important;}
  body{background:#fff !important;color:#000 !important;}
}

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

/* ---------- Dark mode renk uyumu ---------- */
@media (prefers-color-scheme:dark){
  body:not([data-theme]){color-scheme:dark;}
}

/* ---------- Safe area (iPhone notch) ---------- */
@supports(padding:max(0px)){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .topbar,.header{padding-top:max(10px,env(safe-area-inset-top)) !important;}
  .toast-container{bottom:max(12px,env(safe-area-inset-bottom)) !important;}
}

/* ---------- Scroll iyileştirme ---------- */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(128,128,128,.3);border-radius:4px;}
*::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.5);}

/* ---------- Mobil hamburger menu butonu ---------- */
.mobile-menu-btn{
  display:none;
  background:transparent;border:none;color:inherit;
  font-size:22px;cursor:pointer;padding:8px;border-radius:8px;
}
@media (max-width:768px){
  .mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;}
}

/* ==================== YENİ ÖZELLİKLER ==================== */
/* ==== QR SCANNER ==== */
.qr-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.qr-tab{padding:10px 18px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;font-weight:600;font-size:13px;transition:all 0.25s;display:inline-flex;align-items:center;gap:7px;}
.qr-tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-color:var(--primary);box-shadow:0 2px 12px var(--primary-glow);}
.qr-scan-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;}
#qr-reader{width:100%;max-width:480px;margin:0 auto;border-radius:var(--radius-sm);overflow:hidden;}
#qr-reader video{border-radius:var(--radius-sm);}
.qr-result{margin-top:16px;padding:14px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);}
.qr-result-title{font-weight:700;font-size:13px;color:var(--primary);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.qr-list-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;transition:all 0.2s;}
.qr-list-item:hover{border-color:var(--primary);}
.qr-item-info{flex:1;min-width:0;}
.qr-item-no{font-weight:700;color:var(--primary);font-size:14px;}
.qr-item-meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
.qr-canvas-box{background:#fff;padding:14px;border-radius:var(--radius-sm);display:inline-block;margin-top:8px;}
.qr-scan-btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}

/* ==== SIGNATURE PAD ==== */
.sig-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;}
.sig-canvas-wrap{background:#fff;border:2px dashed var(--border-solid);border-radius:var(--radius-sm);overflow:hidden;touch-action:none;position:relative;}
.sig-canvas{display:block;width:100%;height:220px;cursor:crosshair;background:#fff;}
.sig-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ccc;font-size:14px;pointer-events:none;}
.sig-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.photo-capture-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;}
.photo-preview{max-width:100%;max-height:240px;border-radius:var(--radius-sm);display:block;margin:8px auto;border:1px solid var(--border);}
#photoVideo{width:100%;max-width:480px;border-radius:var(--radius-sm);background:#000;display:block;margin:0 auto;}
.sig-saved-list{margin-top:16px;}
.sig-list-item{display:flex;gap:12px;padding:10px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;align-items:center;}
.sig-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;background:#fff;border:1px solid var(--border);}

/* ==== SIG WAYBILL SEARCH LIST ==== */
.sig-filter-chip{padding:6px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;font-weight:600;font-size:12px;transition:all 0.2s;}
.sig-filter-chip:hover{border-color:var(--primary);color:var(--text);}
.sig-filter-chip.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-color:var(--primary);box-shadow:0 2px 8px var(--primary-glow);}
.sig-wb-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;cursor:pointer;background:var(--bg-card);transition:all 0.15s;}
.sig-wb-item:hover{border-color:var(--primary);transform:translateX(2px);}
.sig-wb-item.selected{border-color:var(--primary);background:rgba(124,58,237,0.08);box-shadow:0 2px 10px var(--primary-glow);}
.sig-wb-info{flex:1;min-width:0;}
.sig-wb-no{font-weight:700;color:var(--primary);font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sig-wb-meta{font-size:11px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sig-wb-badge{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600;}
.sig-wb-badge.signed{background:rgba(16,185,129,0.15);color:#10b981;}
.sig-wb-badge.photo{background:rgba(59,130,246,0.15);color:#3b82f6;}
.sig-wb-badge.type{background:rgba(124,58,237,0.15);color:var(--primary-light);}

/* ==== TEMPLATES ==== */
.tpl-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;transition:all 0.25s;position:relative;}
.tpl-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow);}
.tpl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px;}
.tpl-name{font-weight:700;font-size:15px;}
.tpl-meta{font-size:11px;color:var(--text-muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;}
.tpl-meta i{color:var(--primary);margin-right:3px;}
.tpl-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.tpl-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;background:rgba(124,58,237,0.15);color:var(--primary-light);}

/* Responsive tweaks */
@media (max-width:768px){
  .sig-canvas{height:180px;}
  #qr-reader{max-width:100%;}
}

/* ╔══════════════════════════════════════════════════════════════════╗ */
/* ║  V7 DESIGN UPGRADE — Premium Layer                               ║ */
/* ║  Tasarım yükseltmesi: typography, depth, shine, motion           ║ */
/* ║  Fonksiyonaliteye DOKUNULMADI — sadece görsel katman              ║ */
/* ╚══════════════════════════════════════════════════════════════════╝ */

/* === 1. TYPOGRAPHY SYSTEM === */
:root{
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace;
  --font-serif: 'Instrument Serif', 'Georgia', serif;

  /* Enhanced shadow system — multi-layer */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06), 0 10px 20px -8px rgba(0,0,0,0.15);
  --shadow-lg-v7: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05), 0 20px 40px -12px rgba(0,0,0,0.25);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-glow: 0 0 0 1px var(--primary-glow), 0 8px 32px -8px var(--primary-glow), 0 4px 12px -2px var(--primary-glow);

  /* Easing curves */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.65, 0, 0.35, 1);

  /* Radius scale */
  --radius-lg: 20px;
  --radius-xl: 28px;
}

body{
  font-family: var(--font-body);
  font-feature-settings: 'cv02','cv03','cv04','cv11', 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Display font for headings and emphasis */
h1,h2,h3,h4,h5,h6,
.sidebar .logo-text,
.db-greeting,
.section-header h2,
.card-title,
.stat-value,
.db-kpi-value,
.db-mini-val,
.lsm-value,
.sd-value,
.cal-header h3,
.tpl-name{
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-feature-settings: 'ss01','ss02','cv11';
}

.db-kpi-value,
.stat-value,
.db-mini-val,
.lsm-value,
.sd-value{
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* Monospace for codes, invoice numbers */
.db-recent-no,
.db-termin-no,
code, kbd, samp,
[class*="font-mono"]{
  font-family: var(--font-mono) !important;
  font-feature-settings: 'zero','ss01';
  letter-spacing: -0.02em;
}

.logo-text{
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-light) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logoShimmer 6s linear infinite;
  font-weight: 800;
  letter-spacing: -0.03em;
}
@keyframes logoShimmer{
  0%{background-position: 0% 50%;}
  100%{background-position: 200% 50%;}
}

/* === 2. BODY BACKGROUND — Mesh + Noise === */
body::before{
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, var(--primary-glow) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 90%, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 70%);
  filter: blur(40px) saturate(1.2);
  animation: bgDrift 24s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%{transform: translate(0,0) scale(1);}
  50%{transform: translate(-3%, 2%) scale(1.05);}
  100%{transform: translate(2%, -3%) scale(1);}
}

/* Subtle noise overlay for organic texture */
body::after{
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
[data-theme="light"] body::after{ opacity: 0.02; }

/* === 3. ENHANCED SCROLLBAR === */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  border-radius: 10px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  background-clip: padding-box;
}

/* === 4. SIDEBAR — Glass Depth === */
.sidebar{
  background:
    linear-gradient(180deg, var(--bg-sidebar) 0%, color-mix(in srgb, var(--bg-sidebar) 95%, var(--primary)) 100%);
  box-shadow: inset -1px 0 0 var(--border), 4px 0 24px -12px rgba(0,0,0,0.3);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.sidebar::before{
  content:'';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: radial-gradient(ellipse at top, var(--primary-glow) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.5;
}
.logo-icon{
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%);
  box-shadow:
    0 4px 15px var(--primary-glow),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
.logo-icon::after{
  content:'';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-smooth);
}
.sidebar:hover .logo-icon::after{ transform: translateX(100%); }

.sidebar nav a{
  transition: all 0.28s var(--ease-smooth);
  position: relative;
}
.sidebar nav a::before{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.sidebar nav a:not(.active):hover{
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text-main);
  transform: translateX(3px);
}
.sidebar nav a:not(.active):hover i{
  color: var(--primary-light);
  transform: scale(1.1);
}
.sidebar nav a i{ transition: all 0.25s var(--ease-smooth); }
.sidebar nav a.active i{ transform: scale(1.05); }

.nav-section{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2.5px;
  opacity: 0.7;
  position: relative;
}
.nav-section::before{
  content:'';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--primary);
  opacity: 0.4;
  margin-right: 8px;
  vertical-align: middle;
}

/* === 5. TOPBAR — Depth + Glass === */
.topbar{
  background: color-mix(in srgb, var(--bg-card-solid) 72%, transparent);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 1px 0 var(--border), 0 8px 24px -16px rgba(0,0,0,0.2);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.page-title{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--text-main) 0%, color-mix(in srgb, var(--text-main) 75%, var(--primary)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topbar-badge{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 2px 8px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.2);
  font-family: var(--font-mono);
  letter-spacing: 0;
  position: relative;
  overflow: hidden;
}
.topbar-badge::before{
  content:'';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: badgeShine 3.5s ease-in-out infinite;
}
@keyframes badgeShine{
  0%,70%{ left: -100%; }
  100%{ left: 200%; }
}
.topbar-avatar{
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 60%, var(--primary-dark) 100%);
  box-shadow:
    0 4px 14px var(--primary-glow),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -2px 0 rgba(0,0,0,0.12);
  font-family: var(--font-display);
  font-weight: 800;
  transition: all 0.3s var(--ease-spring);
}
.topbar-avatar{ cursor:pointer; }
.topbar-avatar:hover{ transform: rotate(-8deg) scale(1.08); }

/* ── Profil Dropdown ── */
.profile-wrap{ position:relative; }
.profile-dropdown{
  display:none;position:absolute;right:0;top:calc(100% + 10px);
  min-width:200px;background:var(--bg-card-solid);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);z-index:200;
  overflow:hidden;
}
.profile-dropdown.open{ display:block; animation: pdDrop .18s ease-out; }
@keyframes pdDrop{
  from{ opacity:0; transform:translateY(-8px) scale(0.97); }
  to{   opacity:1; transform:translateY(0)    scale(1); }
}
.pd-header{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.pd-avatar{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:#fff;
}
.pd-info .pd-name{ font-size:14px;font-weight:700;color:var(--text-main); }
.pd-info .pd-role{ font-size:11px;color:var(--text-muted);margin-top:1px; }
.pd-body{ padding:6px; }
.pd-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:8px;cursor:pointer;font-size:13px;
  color:var(--text-muted);transition:background .15s,color .15s;
  text-decoration:none;width:100%;background:none;border:none;
  font-family:inherit;text-align:left;
}
.pd-item:hover{ background:var(--glass);color:var(--text-main); }
.pd-item i{ width:16px;text-align:center;font-size:13px; }
.pd-item.danger{ color:#ef4444; }
.pd-item.danger:hover{ background:rgba(239,68,68,.1); }

.notif-bell{
  transition: all 0.25s var(--ease-smooth);
  background: var(--glass);
}
.notif-bell:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 14px var(--primary-glow);
  transform: translateY(-1px);
}
.notif-bell i{ transition: transform 0.4s var(--ease-spring); }
.notif-bell:hover i{ animation: bellShake 0.5s ease-in-out; }
@keyframes bellShake{
  0%,100%{ transform: rotate(0); }
  20%{ transform: rotate(-15deg); }
  40%{ transform: rotate(12deg); }
  60%{ transform: rotate(-8deg); }
  80%{ transform: rotate(5deg); }
}

/* === 6. DASHBOARD HERO === */
.db-hero{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 10%, transparent) 0%,
      color-mix(in srgb, var(--accent) 6%, transparent) 50%,
      color-mix(in srgb, var(--primary) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 12px 40px -12px rgba(0,0,0,0.3);
}
.db-hero::before{
  content:'';
  position: absolute;
  top: -40%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 60%);
  filter: blur(40px);
  opacity: 0.6;
  animation: heroFloat 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroFloat{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(-5%, 5%) scale(1.1); }
}
.db-greeting{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  background: linear-gradient(180deg, var(--text-main) 0%, color-mix(in srgb, var(--text-main) 70%, var(--primary)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.035em;
  position: relative;
  z-index: 1;
}
.db-greeting::after{
  content: '✦';
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  margin-left: 10px;
  animation: sparkleRotate 8s linear infinite;
  display: inline-block;
}
@keyframes sparkleRotate{
  0%{ transform: rotate(0); opacity: 0.5; }
  50%{ transform: rotate(180deg); opacity: 1; }
  100%{ transform: rotate(360deg); opacity: 0.5; }
}
.db-date{
  font-family: var(--font-body);
  position: relative;
  z-index: 1;
  opacity: 0.8;
}

.db-live-badge{
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(16,185,129,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}
.db-live-dot{
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2), 0 0 12px rgba(16,185,129,0.8);
}

/* === 7. KPI CARDS — Shine + Depth === */
.db-kpi-card{
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  transition: all 0.35s var(--ease-smooth);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}
.db-kpi-card::after{
  content:'';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 80%
  );
  transition: left 0.8s var(--ease-smooth);
  pointer-events: none;
}
.db-kpi-card:hover{
  transform: translateY(-5px) scale(1.015);
  box-shadow:
    0 20px 40px -12px rgba(0,0,0,0.3),
    0 0 0 1px var(--kpi-color, var(--primary)),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.db-kpi-card:hover::after{ left: 140%; }
.db-kpi-card:hover .db-kpi-icon{
  transform: scale(1.1) rotate(-5deg);
}

.db-kpi-icon{
  transition: all 0.4s var(--ease-spring);
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--kpi-color, var(--primary)) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
}
.db-kpi-value{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: linear-gradient(180deg, var(--kpi-color, var(--primary)) 0%, color-mix(in srgb, var(--kpi-color, var(--primary)) 70%, var(--text-main)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.db-kpi-sub{
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.8;
}

/* === 8. MINI CARDS — Subtle Gradient Border === */
.db-mini-card{
  border-radius: var(--radius-lg);
  padding: 16px 10px;
  transition: all 0.3s var(--ease-smooth);
  box-shadow: var(--shadow-xs);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.db-mini-card::before{
  content:'';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent, color-mix(in srgb, var(--primary) 30%, transparent), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.db-mini-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.2);
}
.db-mini-card:hover::before{ opacity: 1; }
.db-mini-card:hover .db-mini-icon{
  transform: scale(1.15) rotate(6deg);
}
.db-mini-icon{
  transition: all 0.4s var(--ease-spring);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.db-mini-val{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.03em;
}
.db-mini-lbl{ font-family: var(--font-body); opacity: 0.85; }

/* === 9. STAT CARDS (Generic) — Enhanced Depth === */
.stat-card{
  border-radius: var(--radius-lg);
  transition: all 0.35s var(--ease-smooth);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.stat-card::after{
  content:'';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.7s var(--ease-smooth);
  pointer-events: none;
}
.stat-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg-v7);
}
.stat-card:hover::after{ left: 150%; }
.stat-card:hover .stat-icon{ transform: scale(1.1) rotate(-4deg); }
.stat-icon{ transition: transform 0.4s var(--ease-spring); }
.stat-value{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  font-size: 30px;
  background: linear-gradient(180deg, var(--text-main) 0%, color-mix(in srgb, var(--text-main) 75%, var(--primary)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === 10. BUTTONS — Refined Shine & Depth === */
.btn{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all 0.25s var(--ease-smooth);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before{
  content:'';
  position: absolute;
  top: 0; left: -100%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg,transparent 20%,rgba(255,255,255,0.18) 50%,transparent 80%);
  transition: left 0.55s var(--ease-smooth);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::before{ left: 160%; }
.btn > *{ position: relative; z-index: 2; }

.btn-primary{
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 45%, var(--primary-dark) 100%);
  box-shadow:
    0 2px 8px var(--primary-glow),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px var(--primary-glow),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}
.btn-primary:active{ transform: translateY(0); }

.btn-secondary{
  background: color-mix(in srgb, var(--bg-card-solid) 70%, transparent);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover{
  border-color: var(--primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 15%, transparent);
  transform: translateY(-1px);
}

.btn-success, .btn-danger{
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* === 11. CARDS — Soft Enhanced === */
.card{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease-smooth);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card-solid) 95%, var(--primary)) 0%, var(--bg-card-solid) 100%);
}
[data-theme="light"] .card{ background: var(--bg-card-solid); }
.card:hover{
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.card-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.card-title i{
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === 12. FORM INPUTS — Refined === */
.form-input{
  transition: all 0.25s var(--ease-smooth);
  background: color-mix(in srgb, var(--bg-input) 70%, transparent);
  backdrop-filter: blur(8px);
  border-radius: 10px;
}
.form-input:hover:not(:focus){
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: var(--bg-input);
}
.form-input:focus{
  background: var(--bg-card-solid);
  box-shadow: 0 0 0 3px var(--primary-glow), 0 4px 12px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}
.form-group label{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* === 13. TABLE — Enhanced === */
th{
  font-family: var(--font-display);
  font-weight: 700;
  background: linear-gradient(180deg, var(--bg-input) 0%, color-mix(in srgb, var(--bg-input) 80%, var(--bg-card-solid)) 100%);
  backdrop-filter: blur(8px);
}
td{ transition: background 0.2s; }
tbody tr{ transition: all 0.2s; }
tbody tr:hover{
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

/* === 14. CHIPS / BADGES — Glow Layer === */
.chip, .type-badge{
  font-family: var(--font-display);
  font-weight: 700;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
  transition: all 0.2s var(--ease-smooth);
}
.chip:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px currentColor, 0 4px 10px color-mix(in srgb, currentColor 20%, transparent);
}

/* === 15. TYPE CHIPS (Filter Bar) === */
.type-chip{
  transition: all 0.28s var(--ease-smooth);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
}
.type-chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 18%, transparent);
}
.type-chip.active{
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%);
  box-shadow: 0 4px 16px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* === 16. MODAL — Cinematic Entry === */
.modal-overlay{
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 100%);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.modal{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: modalInV7 0.45s var(--ease-spring);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-card-solid) 98%, var(--primary)) 0%,
      var(--bg-card-solid) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  position: relative;
  overflow: hidden;
}
.modal::before{
  content:'';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100px;
  background: radial-gradient(ellipse at top, var(--primary-glow) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.5;
}
@keyframes modalInV7{
  from{ opacity: 0; transform: scale(0.92) translateY(20px); filter: blur(4px); }
  to{ opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* === 17. TOAST — Premium === */
.toast{
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-lg-v7), inset 0 1px 0 rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.08);
  letter-spacing: -0.01em;
}
.toast-success{
  background: linear-gradient(135deg, rgba(6,95,70,0.95), rgba(4,120,87,0.95));
}
.toast-error{
  background: linear-gradient(135deg, rgba(127,29,29,0.95), rgba(153,27,27,0.95));
}
.toast-info{
  background: linear-gradient(135deg, rgba(30,58,95,0.95), rgba(37,99,235,0.85));
}

/* === 18. NOTIFICATION PANEL === */
.notif-panel{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(20px) saturate(1.3);
  background: color-mix(in srgb, var(--bg-card-solid) 92%, transparent);
  overflow: hidden;
}
.notif-header{
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent);
}
.notif-header h4{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.notif-badge{
  font-family: var(--font-mono);
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--bg-main), 0 2px 6px rgba(239,68,68,0.5);
}

/* === 19. CALENDAR — Refined === */
.cal-header h3{
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--text-main), color-mix(in srgb, var(--text-main) 70%, var(--primary)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cal-day{
  border-radius: 10px;
  transition: all 0.25s var(--ease-smooth);
}
.cal-day:hover{
  transform: scale(1.03);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 15%, transparent);
  z-index: 2;
}
.cal-day.today{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 12%, var(--bg-card-solid)),
    var(--bg-card-solid));
  box-shadow: 0 0 0 2px var(--primary), 0 4px 16px var(--primary-glow);
}
.cal-day .day-num{
  font-family: var(--font-display);
  font-weight: 800;
}
.cal-event{
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* === 20. LIST STAT MINI — Polish === */
.list-stat-mini{
  border-radius: 12px;
  transition: all 0.3s var(--ease-smooth);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.list-stat-mini::before{
  content:'';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}
.list-stat-mini:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px var(--primary-glow);
}
.list-stat-mini:hover::before,
.list-stat-mini.active::before{ transform: scaleX(1); }
.lsm-value{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lsm-label{ font-family: var(--font-display); }

/* === 21. SEARCH BAR — Refined === */
.search-bar input{
  transition: all 0.3s var(--ease-smooth);
  font-weight: 500;
}
.search-bar input:focus{
  background: var(--bg-card-solid);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px var(--primary-glow), 0 4px 16px color-mix(in srgb, var(--primary) 15%, transparent);
}
.search-bar:hover i{ color: var(--primary); }
.search-bar i{ transition: color 0.25s; }

/* === 22. PROGRESS BAR — Animated === */
.progress-bar{
  height: 6px;
  background: color-mix(in srgb, var(--bg-input) 90%, var(--primary));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.progress-bar .fill{
  background: linear-gradient(90deg, var(--primary-light), var(--primary), var(--primary-dark));
  background-size: 200% 100%;
  animation: progressShimmer 2.5s linear infinite;
  box-shadow: 0 0 10px var(--primary-glow);
}
@keyframes progressShimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* === 23. BOTTOM NAV (Mobile) === */
.bottom-nav{
  background: color-mix(in srgb, var(--bg-card-solid) 85%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 -4px 20px -8px rgba(0,0,0,0.25), 0 -1px 0 var(--border);
}
.bottom-nav a{
  transition: all 0.25s var(--ease-smooth);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 600;
}
.bottom-nav a i{ transition: all 0.3s var(--ease-spring); }
.bottom-nav a.active i{
  transform: scale(1.2) translateY(-2px);
  filter: drop-shadow(0 4px 8px var(--primary-glow));
}

/* === 24. FAB — Premium === */
.fab{
  background: linear-gradient(135deg, var(--primary-light), var(--primary) 50%, var(--primary-dark));
  box-shadow:
    0 6px 20px var(--primary-glow),
    0 0 0 1px rgba(255,255,255,0.1) inset,
    inset 0 -3px 0 rgba(0,0,0,0.15);
  transition: all 0.3s var(--ease-spring);
}
.fab:hover{
  transform: scale(1.1) rotate(8deg);
  box-shadow:
    0 12px 32px var(--primary-glow),
    0 0 0 1px rgba(255,255,255,0.15) inset,
    inset 0 -3px 0 rgba(0,0,0,0.15);
}
.fab::before{
  content:'';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  opacity: 0.5;
  filter: blur(16px);
  z-index: -1;
  animation: fabGlow 3s ease-in-out infinite alternate;
}
@keyframes fabGlow{
  0%{ opacity: 0.4; transform: scale(1); }
  100%{ opacity: 0.7; transform: scale(1.1); }
}

/* === 25. PAGE TRANSITIONS — Staggered === */
@keyframes pageIn{
  from{ opacity: 0; transform: translateY(20px); filter: blur(6px); }
  to{ opacity: 1; transform: translateY(0); filter: blur(0); }
}
.page.active{ animation: pageIn 0.5s var(--ease-smooth); }
.page.active > *{ animation: childIn 0.5s var(--ease-smooth) backwards; }
.page.active > *:nth-child(1){ animation-delay: 0.05s; }
.page.active > *:nth-child(2){ animation-delay: 0.1s; }
.page.active > *:nth-child(3){ animation-delay: 0.15s; }
.page.active > *:nth-child(4){ animation-delay: 0.2s; }
.page.active > *:nth-child(5){ animation-delay: 0.25s; }
.page.active > *:nth-child(6){ animation-delay: 0.3s; }
.page.active > *:nth-child(n+7){ animation-delay: 0.35s; }
@keyframes childIn{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* === 26. SELECTION DASHBOARD — Premium Polish === */
.sel-dash{
  border-radius: var(--radius-xl);
  box-shadow:
    0 25px 60px -15px rgba(99,102,241,0.3),
    0 10px 30px -10px rgba(0,0,0,0.15),
    0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent) inset;
}
.sel-dash-title{ font-family: var(--font-display); letter-spacing: -0.02em; }
.sd-section-title{ font-family: var(--font-display); letter-spacing: -0.025em; }
.sd-value{ font-family: var(--font-display); font-weight: 900; letter-spacing: -0.035em; }

/* === 27. MOBILE/UNI CARDS === */
.mobile-card, .stok-card, .uni-mobile-card{
  border-radius: var(--radius-lg);
  transition: all 0.25s var(--ease-smooth);
  box-shadow: var(--shadow-xs);
}
.mobile-card:hover, .stok-card:hover, .uni-mobile-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.mc-title, .db-recent-no{ font-family: var(--font-mono); font-weight: 700; }

/* === 28. EMPTY STATE === */
.empty-state{
  animation: pageIn 0.6s var(--ease-smooth);
}
.empty-state i{
  animation: floatEmpty 4s ease-in-out infinite alternate;
  background: linear-gradient(135deg, var(--text-dim), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.6;
}
.empty-state p{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}
@keyframes floatEmpty{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-6px); }
}

/* === 29. FOCUS RINGS (Accessibility) === */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* === 30. SECTION HEADER === */
.section-header h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, var(--text-main) 0%, color-mix(in srgb, var(--text-main) 72%, var(--primary)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === 31. THEME BUTTONS === */
.theme-btn{
  border-radius: 12px;
  transition: all 0.3s var(--ease-smooth);
  font-family: var(--font-display);
  backdrop-filter: blur(8px);
}
.theme-btn:hover{ transform: translateY(-2px); }
.theme-btn.active{
  box-shadow: 0 4px 12px var(--primary-glow), 0 0 0 2px var(--primary-glow);
}

/* === 32. BULK BAR — Polish === */
.bulk-bar{
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.12);
  font-family: var(--font-display);
}
.bulk-count{ font-variant-numeric: tabular-nums; }

/* === 33. FERMUAR/LASTIK/DUGME BADGES === */
.type-badge{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
  font-family: var(--font-display);
}

/* === 34. REDUCED MOTION === */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::before{ animation: none !important; }
}

/* === 35. RESPONSIVE POLISH === */
@media (max-width: 768px){
  .db-hero{ padding: 18px 20px; }
  .db-greeting{ font-size: 20px; }
  .db-kpi-card{ padding: 14px 16px; }
  .db-kpi-value{ font-size: 24px; }
  .db-kpi-icon{ width: 40px; height: 40px; font-size: 16px; }
  .section-header h2{ font-size: 18px; }
  .stat-value{ font-size: 24px; }
  .db-mini-val{ font-size: 20px; }
  .modal{ border-radius: 18px 18px 14px 14px; }
}
@media (max-width: 480px){
  .db-kpi-card{ padding: 12px 14px; gap: 10px; }
  .db-kpi-value{ font-size: 22px; }
}

/* === 36. LIGHT THEME FINE-TUNES === */
[data-theme="light"] body::before{
  opacity: 0.5;
  filter: blur(60px) saturate(1.3);
}
[data-theme="light"] .db-kpi-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .card{
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px -12px rgba(0,0,0,0.1);
}
[data-theme="light"] .db-kpi-card:hover,
[data-theme="light"] .stat-card:hover{
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .sidebar{
  box-shadow: inset -1px 0 0 var(--border), 1px 0 16px -8px rgba(0,0,0,0.08);
}
[data-theme="light"] .topbar{
  background: rgba(255,255,255,0.72);
  box-shadow: 0 1px 0 var(--border), 0 4px 16px -8px rgba(0,0,0,0.06);
}
[data-theme="light"] .toast{
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* === 37. PRINT STYLES === */
@media print{
  body::before, body::after,
  .sidebar, .topbar, .bottom-nav, .fab, .toast-container,
  .notif-panel, .modal-overlay{ display: none !important; }
  .main{ margin-left: 0 !important; }
  .content{ padding: 0 !important; max-width: 100% !important; }
  *{ box-shadow: none !important; }
}

/* === 38. UTILITY: GLASS PANEL === */
.card:has(.card-title){ position: relative; }
.card > .card-title:first-child{
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.card > .card-title:first-child::after{
  content:'';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  border-radius: 2px;
}

/* === 39. LOGO VERSION BADGE === */
.logo-ver{
  font-family: var(--font-mono);
  font-weight: 600;
  opacity: 0.6;
  letter-spacing: 0;
}

/* === 40. STOCK LEVEL BAR — Refined === */
.stock-level{
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.stock-level .fill{
  box-shadow: 0 0 8px currentColor;
}

/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ║  END V7 DESIGN UPGRADE                                           ║ */
/* ╚══════════════════════════════════════════════════════════════════╝ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  V8 AŞIRI PREMIUM LAYER                                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(600px circle at 15% 10%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(500px circle at 88% 22%, rgba(236,72,153,.14), transparent 55%),
    radial-gradient(700px circle at 50% 95%, rgba(20,184,166,.10), transparent 60%),
    radial-gradient(450px circle at 92% 78%, rgba(245,158,11,.10), transparent 55%);
  animation: v8MeshDrift 22s ease-in-out infinite alternate;
  filter: blur(30px) saturate(1.2);
}
@keyframes v8MeshDrift{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-2%,1%) scale(1.05);}100%{transform:translate(1%,-2%) scale(1);}}
[data-theme="light"] body::after{opacity:.38;filter:blur(40px) saturate(1.4);}

.db-hero{
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 18%, transparent) 0%,
    color-mix(in oklab, var(--primary) 4%, transparent) 45%,
    color-mix(in oklab, #ec4899 8%, transparent) 100%) !important;
  border:1px solid color-mix(in oklab, var(--primary) 20%, transparent) !important;
  position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 60px -25px color-mix(in oklab, var(--primary) 50%, transparent), 0 8px 24px -10px rgba(0,0,0,.35) !important;
}
.db-hero::after{
  content:'';position:absolute;inset:-50%;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0%, color-mix(in oklab,var(--primary) 30%,transparent) 8%, transparent 22%, color-mix(in oklab,#ec4899 25%,transparent) 32%, transparent 48%, color-mix(in oklab,#14b8a6 20%,transparent) 58%, transparent 75%);
  animation: v8AuroraSpin 18s linear infinite;
  opacity:.35;filter:blur(40px);pointer-events:none;z-index:0;
}
@keyframes v8AuroraSpin{to{transform:rotate(360deg);}}
.db-hero > *{position:relative;z-index:1;}
.db-greeting{
  background:linear-gradient(135deg,#fff 0%, color-mix(in oklab,var(--primary-light) 70%, #fff) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px;
}
[data-theme="light"] .db-greeting{background:linear-gradient(135deg,#1a1a2e 0%, var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

.db-kpi-card{
  background:linear-gradient(180deg, color-mix(in oklab, var(--kpi-color, var(--primary)) 6%, var(--bg-card)), var(--bg-card)) !important;
  border:1px solid color-mix(in oklab,var(--kpi-color,var(--primary)) 18%, var(--border)) !important;
}
.db-kpi-card::before{
  height:3px !important;
  background:linear-gradient(90deg, var(--kpi-color,var(--primary)) 0%, color-mix(in oklab,var(--kpi-color,var(--primary)) 60%, #fff) 50%, var(--kpi-color,var(--primary)) 100%) !important;
  box-shadow:0 0 20px color-mix(in oklab,var(--kpi-color,var(--primary)) 60%, transparent);
}
.db-kpi-icon{
  background:linear-gradient(135deg, var(--kpi-color,var(--primary)), color-mix(in oklab,var(--kpi-color,var(--primary)) 60%, #000)) !important;
  color:#fff !important;
  box-shadow:0 8px 20px -6px color-mix(in oklab,var(--kpi-color,var(--primary)) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.db-kpi-value{
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
  background:linear-gradient(180deg, var(--text-main), color-mix(in oklab,var(--text-main) 70%, var(--kpi-color,var(--primary))));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.db-mini-card{position:relative;overflow:hidden;}
.db-mini-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 120%, var(--primary-glow), transparent 60%);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.db-mini-card:hover::after{opacity:.5;}
.db-mini-icon{position:relative;box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px -4px currentColor;}
.db-mini-val{
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, var(--text-main), color-mix(in oklab, var(--text-main) 80%, var(--primary)));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.db-quick-btn{position:relative;overflow:hidden;transition:all .28s cubic-bezier(.4,0,.2,1);}
.db-quick-btn:hover{transform:translateY(-3px) scale(1.02);}

.card{
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px rgba(0,0,0,.4);
}
.card:hover{box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 50px -20px color-mix(in oklab, var(--primary) 40%, rgba(0,0,0,.4));}

.sidebar{background:linear-gradient(180deg, var(--bg-sidebar), color-mix(in oklab,var(--bg-sidebar) 88%, var(--primary) 3%)) !important;}
.sidebar nav a.active{
  background:linear-gradient(135deg, var(--primary), color-mix(in oklab,var(--primary) 60%, #000)) !important;
  box-shadow:0 6px 20px -8px color-mix(in oklab,var(--primary) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.15);
}
.sidebar nav a.active::after{content:'';position:absolute;right:8px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;}
.logo-icon{
  background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%) !important;
  box-shadow:0 8px 20px -6px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.15) !important;
  position:relative;overflow:hidden;
}
.logo-icon::before{
  content:'';position:absolute;inset:0;
  background:conic-gradient(from 0deg, transparent, rgba(255,255,255,.3), transparent 40%);
  animation: v8LogoSpin 4s linear infinite;
}
@keyframes v8LogoSpin{to{transform:rotate(360deg);}}

.topbar{
  background:color-mix(in oklab, var(--bg-card) 88%, transparent) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom:1px solid color-mix(in oklab,var(--primary) 12%, var(--border)) !important;
}

@keyframes v8ValPop{0%{transform:scale(.7);opacity:0;}60%{transform:scale(1.15);opacity:1;}100%{transform:scale(1);}}
.v8-pop{animation:v8ValPop .55s cubic-bezier(.3,1.5,.4,1);display:inline-block;}

/* Daily Goal Ring */
.v8-goal-ring-card{
  display:flex;align-items:center;gap:18px;
  padding:18px 20px;border-radius:var(--radius);margin-bottom:14px;
  background:linear-gradient(135deg, color-mix(in oklab,var(--primary) 10%, var(--bg-card)), var(--bg-card));
  border:1px solid color-mix(in oklab,var(--primary) 20%, var(--border));
  position:relative;overflow:hidden;
}
.v8-goal-ring{width:88px;height:88px;flex-shrink:0;position:relative;}
.v8-goal-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.v8-goal-ring-bg{fill:none;stroke:var(--border-solid);stroke-width:8;}
.v8-goal-ring-fg{
  fill:none;stroke:url(#v8GoalGrad);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:251.2;stroke-dashoffset:251.2;
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 6px var(--primary-glow));
}
.v8-goal-pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;}
.v8-goal-pct .num{font-size:20px;background:linear-gradient(135deg,var(--primary-light),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px;}
.v8-goal-pct .sym{font-size:10px;color:var(--text-muted);font-weight:700;margin-top:-2px;}
.v8-goal-body{flex:1;min-width:0;}
.v8-goal-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:4px;}
.v8-goal-stats-row{font-size:13px;color:var(--text-main);display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
.v8-goal-stats-row b{color:var(--primary);font-weight:800;}
.v8-goal-hint{font-size:11px;color:var(--text-dim);margin-top:4px;}

/* Timeline */
.v8-timeline{position:relative;padding-left:22px;max-height:320px;overflow-y:auto;}
.v8-timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--primary),transparent);opacity:.3;}
.v8-timeline-item{position:relative;padding:8px 0;font-size:13px;}
.v8-timeline-item:not(:last-child){border-bottom:1px dashed var(--border);}
.v8-timeline-dot{position:absolute;left:-22px;top:12px;width:14px;height:14px;border-radius:50%;background:var(--bg-card);border:2px solid var(--_tc,var(--primary));box-shadow:0 0 0 3px color-mix(in oklab,var(--_tc,var(--primary)) 15%, transparent);}
.v8-timeline-dot.standart{--_tc:#a78bfa;}.v8-timeline-dot.fermuar{--_tc:#60a5fa;}.v8-timeline-dot.lastik{--_tc:#34d399;}.v8-timeline-dot.dugme{--_tc:#fbbf24;}.v8-timeline-dot.toptan{--_tc:#f472b6;}
.v8-tl-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.v8-tl-line1 .type{font-size:10px;font-weight:800;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;}
.v8-tl-line1 .type.standart{background:rgba(167,139,250,.15);color:#a78bfa;}
.v8-tl-line1 .type.fermuar{background:rgba(96,165,250,.15);color:#60a5fa;}
.v8-tl-line1 .type.lastik{background:rgba(52,211,153,.15);color:#34d399;}
.v8-tl-line1 .type.dugme{background:rgba(251,191,36,.15);color:#fbbf24;}
.v8-tl-line1 .type.toptan{background:rgba(244,114,182,.15);color:#f472b6;}
.v8-tl-line1 .no{font-weight:700;color:var(--text-main);}
.v8-tl-line1 .ago{margin-left:auto;font-size:11px;color:var(--text-dim);}
.v8-tl-line2{font-size:12px;color:var(--text-muted);margin-top:3px;}

/* Atölye comparison */
.v8-atolye-bar{padding:10px 0;border-bottom:1px solid var(--border);}
.v8-atolye-bar:last-child{border-bottom:none;}
.v8-atolye-bar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.v8-atolye-name{font-size:13px;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:7px;}
.v8-atolye-name .rank{width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--glass);color:var(--text-muted);}
.v8-atolye-name .rank.gold{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,.4);}
.v8-atolye-name .rank.silver{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#fff;}
.v8-atolye-name .rank.bronze{background:linear-gradient(135deg,#d97706,#92400e);color:#fff;}
.v8-atolye-count{font-size:13px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;}
.v8-atolye-bar-track{height:6px;background:var(--glass);border-radius:10px;overflow:hidden;}
.v8-atolye-bar-fill{
  height:100%;border-radius:10px;
  background:linear-gradient(90deg,var(--primary),color-mix(in oklab,var(--primary) 50%, #ec4899));
  box-shadow:0 0 8px var(--primary-glow);
  transition:width 1s cubic-bezier(.4,0,.2,1);
  background-size:200% 100%;animation: v8BarShimmer 2.5s ease-in-out infinite;
}
@keyframes v8BarShimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* Top items */
.v8-top-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.v8-top-item:last-child{border-bottom:none;}
.v8-top-rank{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;background:var(--glass);color:var(--text-muted);}
.v8-top-rank.r1{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;}
.v8-top-rank.r2{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#fff;}
.v8-top-rank.r3{background:linear-gradient(135deg,#d97706,#92400e);color:#fff;}
.v8-top-name{flex:1;font-size:13px;font-weight:600;color:var(--text-main);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.v8-top-count{font-size:12px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;}
.v8-top-count small{color:var(--text-dim);font-weight:500;margin-left:3px;}

/* Summary ribbon */
.v8-summary-ribbon{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:0 0 16px;padding:12px;border-radius:var(--radius);
  background:linear-gradient(90deg, color-mix(in oklab,var(--primary) 6%, var(--bg-card)), color-mix(in oklab,#ec4899 5%, var(--bg-card)), color-mix(in oklab,#14b8a6 5%, var(--bg-card)), color-mix(in oklab,#f59e0b 5%, var(--bg-card)));
  border:1px solid var(--border);
}
.v8-srb{text-align:center;padding:6px;border-right:1px solid var(--border);}
.v8-srb:last-child{border-right:none;}
.v8-srb-val{font-size:20px;font-weight:900;color:var(--text-main);font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.v8-srb-lbl{font-size:10px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-top:2px;}
.v8-srb.purple .v8-srb-val{color:#a78bfa;}.v8-srb.pink .v8-srb-val{color:#f472b6;}.v8-srb.teal .v8-srb-val{color:#2dd4bf;}.v8-srb.amber .v8-srb-val{color:#fbbf24;}
@media(max-width:680px){.v8-summary-ribbon{grid-template-columns:repeat(2,1fr);}.v8-srb:nth-child(2){border-right:none;}}

/* Durum Özeti Kartı (Hava Durumu Benzeri) */
.db-status-card{
  display:flex;align-items:center;gap:16px;padding:20px;
  background:linear-gradient(135deg, var(--bg-card), color-mix(in oklab, var(--primary) 3%, var(--bg-card)));
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:16px;position:relative;overflow:hidden;
  transition:all 0.3s;
}
.db-status-card::before{
  content:'';position:absolute;top:-50%;right:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle, rgba(124,58,237,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.db-status-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12);}
.db-status-icon{
  font-size:48px;flex-shrink:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.1));
  animation:dbStatusFloat 3s ease-in-out infinite;
}
@keyframes dbStatusFloat{
  0%, 100%{transform:translateY(0px);}
  50%{transform:translateY(-5px);}
}
.db-status-body{flex:1;min-width:0;}
.db-status-title{
  font-size:18px;font-weight:800;color:var(--text-main);
  margin-bottom:4px;letter-spacing:-0.3px;
}
.db-status-desc{
  font-size:13px;color:var(--text-muted);line-height:1.5;
}
.db-status-badge{
  text-align:center;padding:12px 16px;
  background:var(--glass);border:1px solid var(--border);
  border-radius:12px;flex-shrink:0;
}
.db-status-badge-val{
  font-size:24px;font-weight:900;
  background:linear-gradient(135deg, var(--primary-light), var(--primary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-0.5px;
}
.db-status-badge-lbl{
  font-size:10px;color:var(--text-muted);
  font-weight:700;text-transform:uppercase;
  letter-spacing:0.5px;margin-top:2px;
}
@media(max-width:768px){
  .db-status-card{flex-wrap:wrap;padding:16px;}
  .db-status-icon{font-size:36px;}
  .db-status-title{font-size:16px;}
  .db-status-desc{font-size:12px;}
  .db-status-badge{width:100%;order:3;}
}

/* FAB menu */
.v8-fab-menu{position:fixed;bottom:150px;right:20px;z-index:55;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px;pointer-events:none;}
.v8-fab-menu.open{pointer-events:auto;}
.v8-fab-item{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-card-solid);border:1px solid var(--border);
  padding:6px 14px 6px 6px;border-radius:30px;
  box-shadow:0 6px 20px -4px rgba(0,0,0,.35);
  opacity:0;transform:translateY(20px) scale(.8);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  cursor:pointer;font-size:13px;font-weight:600;color:var(--text-main);white-space:nowrap;
}
.v8-fab-item .ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0;}
.v8-fab-menu.open .v8-fab-item{opacity:1;transform:translateY(0) scale(1);}
.v8-fab-menu.open .v8-fab-item:nth-child(1){transition-delay:.02s;}
.v8-fab-menu.open .v8-fab-item:nth-child(2){transition-delay:.06s;}
.v8-fab-menu.open .v8-fab-item:nth-child(3){transition-delay:.1s;}
.v8-fab-menu.open .v8-fab-item:nth-child(4){transition-delay:.14s;}
.v8-fab-menu.open .v8-fab-item:nth-child(5){transition-delay:.18s;}
.v8-fab-item:hover{transform:translateY(-2px) scale(1.03);border-color:var(--primary);}
.fab.v8-open{transform:rotate(135deg) scale(1.1);}

/* Shortcuts modal */
.v8-sh-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:999;display:none;align-items:center;justify-content:center;padding:20px;}
.v8-sh-overlay.show{display:flex;}
.v8-sh-modal{background:var(--bg-card-solid);border:1px solid var(--border);border-radius:20px;padding:28px;max-width:520px;width:100%;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation: v8ModalIn .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes v8ModalIn{from{opacity:0;transform:scale(.9) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
.v8-sh-title{font-size:20px;font-weight:800;margin-bottom:4px;background:linear-gradient(135deg,var(--primary-light),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.v8-sh-sub{font-size:12px;color:var(--text-muted);margin-bottom:20px;}
.v8-sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;}
.v8-sh-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border);font-size:13px;gap:10px;}
.v8-sh-row span{color:var(--text-muted);}
.v8-sh-kbd{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;background:var(--glass);border:1px solid var(--border);padding:3px 8px;border-radius:6px;color:var(--text-main);box-shadow:0 2px 0 var(--border-solid);white-space:nowrap;}
@media(max-width:560px){.v8-sh-grid{grid-template-columns:1fr;}}

/* Scroll top */
.v8-scroll-top{
  position:fixed;bottom:220px;right:20px;z-index:54;
  width:40px;height:40px;border-radius:50%;
  background:var(--bg-card-solid);border:1px solid var(--border);
  color:var(--text-main);cursor:pointer;font-size:14px;
  box-shadow:0 6px 20px -4px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.v8-scroll-top.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.v8-scroll-top:hover{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ═══════════════ V10 MOBILE RESPONSIVE POLISH ═══════════════ */
@media(max-width:768px){
  /* Topbar: compact padding, smaller title, tighter gap */
  .topbar{padding:10px 12px;gap:8px;}
  .topbar .page-title{font-size:15px;}
  .topbar-right{gap:6px;}
  .topbar-avatar{width:32px;height:32px;font-size:12px;}
  .topbar .menu-btn{width:36px;height:36px;font-size:16px;}

  /* V9 theme chip in topbar — icon only on small screens */
  .v9-theme-chip{padding:6px 8px;}
  .v9-theme-chip .v9-label{display:none;}
  .v9-theme-chip .v9-tcd{width:16px;height:16px;}

  /* V9 theme grid — 2 cols & smaller hero */
  .v9-theme-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .v9-tc-hero{height:54px;}
  .v9-tc-body{padding:8px 10px 10px;}
  .v9-tc-name{font-size:12.5px;}
  .v9-tc-desc{font-size:10px;}
  .v9-tc-check{width:20px;height:20px;font-size:9px;top:6px;right:6px;}
  .v9-tc-dots{bottom:6px;left:8px;gap:3px;}
  .v9-tc-dot{width:7px;height:7px;}

  /* V9 theme category tabs — horizontal scroll if needed */
  .v9-theme-cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:3px;gap:3px;}
  .v9-theme-cats::-webkit-scrollbar{display:none;}
  .v9-theme-cat{flex:0 0 auto;min-width:0;padding:8px 12px;font-size:12px;white-space:nowrap;}
  .v9-theme-cat .cnt{padding:1px 6px;font-size:9.5px;}

  /* V8 Summary ribbon: 2x2 grid on mobile, more breathing room */
  .v8-summary-ribbon{grid-template-columns:repeat(2,1fr);gap:8px;padding:10px;}
  .v8-srb{padding:10px 8px;}
  .v8-srb-val{font-size:22px;}
  .v8-srb-lbl{font-size:9.5px;letter-spacing:0.5px;}

  /* V8 Goal ring card: stack vertically, center */
  .v8-goal-ring-card{flex-direction:column;align-items:stretch;gap:14px;padding:16px;text-align:left;}
  .v8-goal-ring{width:78px;height:78px;align-self:center;}
  .v8-goal-pct .num{font-size:18px;}
  .v8-goal-stats-row{font-size:12px;gap:10px;}
  .v8-goal-stats-row button{margin-left:0!important;width:100%;margin-top:6px;}

  /* V8 Timeline: tighter, smaller dots */
  .v8-timeline{padding-left:18px;max-height:260px;}
  .v8-timeline::before{left:5px;}
  .v8-timeline-dot{left:-18px;width:12px;height:12px;top:11px;}
  .v8-timeline-item{padding:7px 0;font-size:12.5px;}
  .v8-tl-line1{gap:6px;}
  .v8-tl-line1 .type{font-size:9px;padding:2px 6px;}

  /* V8 FAB menu — slide up from bottom with more breathing room */
  .v8-fab-menu{bottom:145px;right:16px;left:16px;align-items:flex-end;gap:8px;}
  .v8-fab-item{padding:10px 14px;font-size:13px;border-radius:14px;width:auto;}
  .v8-fab-item .ic{width:34px;height:34px;font-size:14px;}

  /* V8 Scroll-top pill — higher up on mobile to avoid bottom nav */
  .v8-scroll-top{bottom:150px;right:16px;width:42px;height:42px;}

  /* V8 Shortcuts modal — mobile-friendly, smaller type */
  .v8-sh-modal{padding:20px 18px;border-radius:16px;max-height:88vh;overflow-y:auto;}
  .v8-sh-title{font-size:17px;}
  .v8-sh-grid{grid-template-columns:1fr;gap:6px;}
  .v8-sh-row{padding:8px 10px;}
  .v8-sh-kbd{font-size:10px;padding:2px 6px;}

  /* FAB: slightly smaller + higher so it doesn't collide with bottom nav */
  .fab{width:52px;height:52px;font-size:20px;bottom:72px;right:16px;}

  /* Better tap targets for theme category tabs */
  .v9-theme-cat{min-height:38px;}
  .v9-theme-card{min-height:96px;}
}

@media(max-width:420px){
  /* Extra-small phones — single col for goal stats */
  .v8-goal-stats-row{flex-direction:column;gap:6px;align-items:flex-start;}
  /* Even tighter summary ribbon */
  .v8-srb-val{font-size:20px;}
  /* Theme grid still 2 cols but ultra compact */
  .v9-tc-hero{height:48px;}
  .v9-tc-name{font-size:12px;}
  .v9-tc-desc{font-size:9.5px;}
  /* Topbar title — abbreviated if space is tight */
  .topbar .page-title{font-size:14px;}
  /* Scroll-top tucked further */
  .v8-scroll-top{bottom:140px;right:14px;width:38px;height:38px;}
}

/* Tap-friendly — larger hit areas on touch devices */
@media(hover:none) and (pointer:coarse){
  .v9-theme-card,.v9-theme-cat,.v8-fab-item,.v8-srb{min-height:44px;}
  .v8-fab-item{padding:12px 16px;}
  .v9-theme-card:active{transform:scale(0.97);}
  .v9-theme-cat:active{transform:scale(0.96);}
  .v8-fab-item:active{transform:scale(0.97);}
}

/* Reduce motion if requested */
@media(prefers-reduced-motion:reduce){
  body.v9-theme-changing{animation:none!important;}
  .v8-fab-menu .v8-fab-item{transition:none!important;}
  .v9-theme-card{transition:none!important;}
}


/* ═══ MOBILE BOTTOM-NAV FIX (v6 - locked, no horizontal drift) ═══ */
@media (max-width: 768px){
  /* Yatay taşmayı tamamen engelle */
  html, body{
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
  }
  /* Arka plan animasyonu iOS'ta scroll'u bozabiliyor - kapat */
  body::before{
    animation: none !important;
    transform: none !important;
  }
  /* Bottom-nav - viewport'a kilitli */
  .bottom-nav{
    display:block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 9999 !important;
    padding: 6px 0 !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    touch-action: manipulation;
  }
  .bottom-nav-inner{
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .bottom-nav a{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 2px !important;
    box-sizing: border-box !important;
  }
  .bottom-nav a span{
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
  }
  /* Nav'ın altında içerik kalmasın */
  .content{ padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  /* FAB'ları nav ve içerik üstüne kaydır */
  .fab{ bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
  .toast-container{ bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important; }
  .v8-fab-menu{ bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; }
  #v8ScrollTop, .v8-scroll-top{ bottom: calc(165px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 900px) and (pointer:coarse){
  .bottom-nav{ display:block !important; }
}

/* === BLOCK 2: Global Search Ctrl+K (eski 17795-17815) === */
  .gs-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);z-index:var(--z-modal)9;display:none;align-items:flex-start;justify-content:center;padding-top:10vh;}
  .gs-overlay.show{display:flex;}
  .gs-box{width:min(680px,92vw);background:var(--bg-card,#fff);color:var(--text,#111);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden;border:1px solid var(--border,#e5e7eb);display:flex;flex-direction:column;max-height:80vh;}
  .gs-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border,#e5e7eb);}
  .gs-head i{color:var(--primary,#2563eb);font-size:18px;}
  .gs-input{flex:1;border:none;outline:none;background:transparent;font-size:16px;color:inherit;font-family:inherit;}
  .gs-kbd{font-size:11px;color:var(--text-muted,#888);border:1px solid var(--border,#e5e7eb);padding:2px 6px;border-radius:4px;}
  .gs-list{overflow-y:auto;max-height:60vh;}
  .gs-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border,#f1f1f1);}
  .gs-item.active,.gs-item:hover{background:var(--primary,#2563eb);color:#fff;}
  .gs-item.active .gs-meta,.gs-item:hover .gs-meta{color:rgba(255,255,255,.85);}
  .gs-item.active .gs-badge,.gs-item:hover .gs-badge{background:rgba(255,255,255,.25);color:#fff;}
  .gs-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--glass,#f3f4f6);}
  .gs-body{flex:1;min-width:0;}
  .gs-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gs-meta{font-size:11px;color:var(--text-muted,#888);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gs-badge{font-size:10px;padding:2px 8px;border-radius:20px;background:var(--primary-soft,#eef2ff);color:var(--primary,#2563eb);font-weight:600;flex-shrink:0;}
  .gs-empty{padding:32px 16px;text-align:center;color:var(--text-muted,#888);font-size:13px;}
  .gs-foot{padding:8px 14px;font-size:11px;color:var(--text-muted,#888);border-top:1px solid var(--border,#e5e7eb);display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;}
  .gs-fab{position:fixed;bottom:20px;right:20px;width:52px;height:52px;border-radius:50%;background:var(--primary,#2563eb);color:#fff;border:none;box-shadow:0 6px 20px rgba(37,99,235,.4);cursor:pointer;font-size:18px;z-index:9998;display:none;align-items:center;justify-content:center;}
  @media (max-width:768px){.gs-fab{display:flex;}}

/* === BLOCK 3: Login overlay (eski 18774-19293) === */
/* ---- Login overlay (fullscreen, animated) ---- */
/* =========================================================
   LOGIN — v7 Premium Glassmorphism
   ========================================================= */
#loginOverlay{
  position:fixed; inset:0; z-index:var(--z-max);
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter','Outfit',system-ui,sans-serif;
  padding:24px; overflow:auto;
  color:#e7e3ff;
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(139,92,246,.35) 0%, transparent 55%),
    radial-gradient(1000px 700px at 85% 80%, rgba(59,130,246,.28) 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 50%, rgba(236,72,153,.18) 0%, transparent 60%),
    linear-gradient(135deg, #0b0720 0%, #1a0d3d 45%, #0c0a28 100%);
  isolation:isolate;
}

/* Animated aurora mesh */
#loginOverlay::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(124,58,237,.55), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(59,130,246,.45), transparent 40%),
    radial-gradient(circle at 70% 85%, rgba(236,72,153,.35), transparent 40%),
    radial-gradient(circle at 15% 75%, rgba(16,185,129,.25), transparent 38%);
  filter: blur(80px) saturate(1.15);
  opacity:.55; z-index:-2;
  animation: loginAurora 22s ease-in-out infinite alternate;
}
@keyframes loginAurora{
  0%  { transform: translate(0,0) scale(1); }
  50% { transform: translate(-3%, 2%) scale(1.05); }
  100%{ transform: translate(3%,-2%) scale(1.02); }
}

/* Noise/grain texture overlay (pure CSS, no images) */
#loginOverlay::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  opacity:.45;
}

/* Legacy blobs – hidden, replaced by aurora */
#loginOverlay .blob{ display:none; }

/* ---- Login card (glass) ---- */
#loginCard{
  position:relative; z-index:2;
  width:100%; max-width:460px;
  padding:42px 40px 32px;
  border-radius:32px;
  color:#1a1330;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(248,245,255,.92) 100%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    0 40px 100px -25px rgba(10,6,30,.6),
    0 20px 50px -15px rgba(124,58,237,.4),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(124,58,237,.1);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  animation: loginPop .5s cubic-bezier(.22,1,.36,1);
}
#loginCard::before{
  content:""; position:absolute; inset:-2px; border-radius:34px;
  padding:2px; pointer-events:none;
  background: linear-gradient(135deg,
    rgba(255,255,255,1) 0%,
    rgba(139,92,246,.6) 25%,
    rgba(236,72,153,.5) 50%,
    rgba(59,130,246,.6) 75%,
    rgba(255,255,255,1) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.9;
  animation: borderShimmer 3s ease-in-out infinite;
}
@keyframes borderShimmer {
  0%, 100% { opacity:.9; }
  50% { opacity:.6; }
}
@keyframes loginPop {
  from{ opacity:0; transform:translateY(20px) scale(.96); filter:blur(4px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* ---- Brand / logo ---- */
#loginCard .brand{
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:32px;
}
#loginCard .logo-wrap{
  position:relative; width:96px; height:96px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
#loginCard .logo-wrap::before{
  content:""; position:absolute; inset:-12px;
  border-radius:36px;
  background: conic-gradient(from 0deg,
    #8b5cf6, #ec4899, #3b82f6, #10b981, #8b5cf6);
  filter: blur(20px); opacity:.7;
  animation: logoHalo 8s linear infinite;
}
@keyframes logoHalo{ to { transform:rotate(360deg); } }
#loginCard .logo-wrap::after{
  content:""; position:absolute; inset:-3px;
  border-radius:28px;
  background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,255,255,.3));
  z-index:0;
}
#loginCard .logo{
  position:relative; z-index:1;
  width:100%; height:100%;
  border-radius:24px;
  background:
    linear-gradient(135deg, #a78bfa 0%, #8b5cf6 40%, #7c3aed 70%, #6d28d9 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:42px;
  box-shadow:
    0 20px 50px -10px rgba(124,58,237,.7),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -10px 20px rgba(0,0,0,.2);
  letter-spacing:-.02em;
  animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}
#loginCard .logo i{
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
  animation: logoPulse 2s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

#loginCard h1{
  font-family:'Outfit','Inter',sans-serif;
  font-size:34px; font-weight:900;
  background: linear-gradient(135deg, #1a1330 0%, #7c3aed 50%, #ec4899 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin:0 0 8px; letter-spacing:-1px;
  text-align:center;
  filter: drop-shadow(0 2px 4px rgba(124,58,237,.15));
}
#loginCard .subtitle{
  font-size:15px; color:#6b7280; text-align:center;
  font-weight:500; letter-spacing:-.2px;
}

/* ---- Form ---- */
#loginCard .field{ margin-bottom:18px; }
#loginCard label{
  display:block; font-size:12px; font-weight:700;
  color:#4b5563; margin-bottom:10px;
  text-transform:uppercase; letter-spacing:1px;
}
#loginCard .input-wrap{ position:relative; }
#loginCard .input-wrap .ico-left{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  color:#9ca3af; font-size:16px; pointer-events:none;
  transition: color .3s, transform .3s;
  width:20px; text-align:center; z-index:2;
}
#loginCard input[type="text"],
#loginCard input[type="password"]{
  width:100% !important;
  padding:16px 54px 16px 56px !important;
  border:2px solid #e5e7eb !important;
  border-radius:16px !important;
  font-size:15px !important;
  background:linear-gradient(135deg, #fafbff 0%, #f8f9fc 100%) !important;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  font-family:inherit !important;
  color:#1a1330 !important;
  box-sizing:border-box !important;
  text-indent:0 !important;
  height:auto !important;
  font-weight:500;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.05);
}
#loginCard input::placeholder{ color:#9ca3af; opacity:1; font-weight:400; }
#loginCard input:hover{
  border-color:#d1d5db !important;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.08);
}
#loginCard input:focus{
  outline:none !important;
  border-color: #8b5cf6 !important;
  background:linear-gradient(135deg, #fff 0%, #faf5ff 100%) !important;
  box-shadow:
    0 0 0 5px rgba(139,92,246,.15),
    0 8px 20px -4px rgba(124,58,237,.2) !important;
  transform: translateY(-1px);
}
#loginCard .input-wrap:focus-within .ico-left{
  color:#8b5cf6;
  transform: translateY(-50%) scale(1.12);
}

#loginCard .toggle-pass{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#9ca3af; cursor:pointer;
  padding:9px 11px; font-size:14px; border-radius:10px;
  transition: all .2s;
}
#loginCard .toggle-pass:hover{ color:#7c3aed; background:rgba(124,58,237,.08); }
#loginCard .toggle-pass:active{ transform:translateY(-50%) scale(.94); }

/* Caps-lock warning */
#capsWarn{
  display:none; font-size:12px; color:#b45309; font-weight:600;
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border:1px solid #fde68a;
  padding:8px 12px; border-radius:10px; margin-top:8px;
  align-items:center; gap:8px;
}
#capsWarn.show{ display:flex; }

/* Strength meter */
#passMeter{
  height:5px; background:#eef0f5; border-radius:5px; overflow:hidden;
  margin-top:8px; display:none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
#passMeter.show{ display:block; }
#passMeter > div{
  height:100%; width:0%; border-radius:5px;
  transition: width .4s cubic-bezier(.4,0,.2,1), background .3s;
  background: linear-gradient(90deg,#ef4444,#f59e0b,#10b981);
  background-size: 300% 100%;
}

/* Remember / forgot row */
#loginCard .row{
  display:flex; align-items:center; justify-content:space-between;
  margin: 4px 0 20px; flex-wrap:wrap; gap:10px;
}
#loginCard .remember{
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:#4b5563; cursor:pointer;
  user-select:none;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-weight:500;
}
#loginCard .remember input[type="checkbox"]{
  width:18px; height:18px; margin:0; padding:0;
  accent-color:#7c3aed; cursor:pointer;
  flex-shrink:0;
}
#loginCard .remember span{
  font-size:13px; font-weight:500; color:#374151;
  text-transform:none !important;
  letter-spacing:normal !important;
  white-space:nowrap;
}
#loginCard .forgot{
  font-size:13px; color:#7c3aed;
  text-decoration:none; font-weight:600; cursor:pointer;
  background:none; border:none; padding:4px 6px;
  border-radius:6px;
  font-family:inherit;
  transition: all .2s;
}
#loginCard .forgot:hover{ background:rgba(124,58,237,.08); }

/* Error message */
#loginError{
  display:none;
  background:linear-gradient(135deg,#fef2f2,#fee2e2);
  color:#991b1b;
  border:1px solid #fecaca;
  padding:12px 14px; border-radius:12px; font-size:13px; font-weight:500;
  margin-bottom:14px; align-items:center; gap:10px;
  box-shadow: 0 2px 8px -2px rgba(239,68,68,.18);
}
#loginError.show{ display:flex; animation: shake .45s; }
#loginError i{ color:#dc2626; font-size:15px; }
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-7px); }
  40%,80% { transform:translateX(7px); }
}

/* Lockout notice */
#loginLock{
  display:none;
  background:linear-gradient(135deg,#fff7ed,#ffedd5);
  color:#9a3412;
  border:1px solid #fed7aa;
  padding:12px 14px; border-radius:12px; font-size:13px; font-weight:500;
  margin-bottom:14px; align-items:center; gap:10px;
  box-shadow: 0 2px 8px -2px rgba(234,88,12,.18);
}
#loginLock.show{ display:flex; }
#loginLock i{ color:#ea580c; font-size:15px; }

/* Main button */
#loginCard .login-btn{
  width:100%; padding:18px;
  border:none; border-radius:16px;
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 25%, #7c3aed 50%, #6d28d9 75%, #5b21b6 100%);
  background-size: 300% 300%;
  background-position: 0% 50%;
  color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; transition: all .4s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 16px 40px -8px rgba(124,58,237,.6),
    0 6px 16px -4px rgba(124,58,237,.4),
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.1);
  font-family:inherit;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:12px;
  letter-spacing:.3px;
  animation: buttonGlow 3s ease-in-out infinite;
}
@keyframes buttonGlow {
  0%, 100% { box-shadow: 0 16px 40px -8px rgba(124,58,237,.6), 0 6px 16px -4px rgba(124,58,237,.4), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.1); }
  50% { box-shadow: 0 20px 50px -10px rgba(124,58,237,.7), 0 8px 20px -4px rgba(124,58,237,.5), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.15); }
}
#loginCard .login-btn::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg,
    transparent 20%,
    rgba(255,255,255,.35) 50%,
    transparent 80%);
  transform: translateX(-100%);
  transition: transform .7s;
}
#loginCard .login-btn:hover{
  transform:translateY(-3px) scale(1.01);
  background-position: 100% 50%;
  box-shadow:
    0 24px 60px -12px rgba(124,58,237,.75),
    0 10px 24px -4px rgba(124,58,237,.55),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.15);
}
#loginCard .login-btn:hover::before{ transform:translateX(100%); }
#loginCard .login-btn:active{ transform:translateY(-1px) scale(.99); }
#loginCard .login-btn:disabled,
#loginCard .login-btn.loading{ opacity:.78; cursor:wait; }
#loginCard .login-btn .btn-text{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:12px; }
#loginCard .login-btn .btn-text i{ font-size:15px; }
#loginCard .login-btn .spinner{
  display:none; width:20px; height:20px;
  border:3px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation: spin .8s linear infinite;
}
#loginCard .login-btn.loading .spinner{ display:inline-block; }
#loginCard .login-btn.loading .btn-text{ display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Divider + hint */
#loginCard .hint{
  margin-top:18px; padding:12px 14px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border:1px solid #ddd6fe; border-radius:12px;
  font-size:12px; color:#6d28d9;
  display:flex; align-items:center; gap:8px;
}
#loginCard .hint b{ font-weight:700; }

/* Footer */
#loginCard .footer-note{
  text-align:center; margin-top:24px; padding-top:18px;
  border-top:1px solid #eef0f5;
  font-size:12px; color:#9ca3af; line-height:1.7;
}
#loginCard .footer-note b{
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:700;
}
#loginCard .version{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:6px;
  padding:3px 10px;
  background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(99,102,241,.12));
  color:#6d28d9;
  border:1px solid rgba(124,58,237,.18);
  border-radius:999px;
  font-size:10px; font-weight:700;
  letter-spacing:.6px;
}
#loginCard .version::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#10b981; box-shadow:0 0 8px #10b981;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%   { opacity:.55; transform:scale(1.15); }
}

/* Top-right chips (clock + locale) */
#loginClock{
  position:absolute; top:20px; right:20px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 14px; border-radius:999px;
  font-size:12px; font-weight:600; color:#f5f3ff;
  display:flex; align-items:center; gap:8px;
  z-index:3;
  box-shadow: 0 8px 20px -4px rgba(0,0,0,.35);
  letter-spacing:.3px;
}
#loginClock i{ color:#c4b5fd; font-size:11px; }

/* Top-left brand chip */
#loginTopBrand{
  position:absolute; top:20px; left:20px;
  display:flex; align-items:center; gap:10px;
  padding:8px 14px 8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 20px -4px rgba(0,0,0,.35);
  color:#f5f3ff; font-size:12px; font-weight:600;
  z-index:3;
}
#loginTopBrand .dot{
  width:8px; height:8px; border-radius:50%;
  background:#10b981; box-shadow:0 0 10px #10b981;
  animation: pulseDot 2s ease-in-out infinite;
}

body.logged-out { overflow:hidden !important; }

/* Mobile tweaks */
@media (max-width: 480px){
  #loginOverlay{ padding:16px; }
  #loginCard{ padding:30px 22px 22px; border-radius:22px; }
  #loginCard h1{ font-size:25px; }
  #loginCard .subtitle{ font-size:13px; }
  #loginCard .logo-wrap{ width:72px; height:72px; margin-bottom:14px; }
  #loginCard .logo{ font-size:30px; }
  #loginClock{ top:12px; right:12px; font-size:11px; padding:6px 11px; }
  #loginTopBrand{ top:12px; left:12px; font-size:11px; padding:6px 11px 6px 8px; }
  #loginTopBrand .label{ display:none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #loginOverlay::before,
  #loginCard .logo-wrap::before,
  #loginCard .version::before,
  #loginTopBrand .dot { animation:none !important; }
  #loginCard{ animation:none !important; }
}

/* ---- Şifre Sıfırlama Bölümü ---- */
#resetSection{
  display:none;flex-direction:column;gap:10px;
  padding:14px;background:rgba(124,58,237,0.07);
  border:1px solid rgba(124,58,237,0.22);border-radius:12px;margin-top:6px;
}
#resetSection.show{ display:flex; animation: loginPop .25s ease-out; }
#resetSection h4{
  margin:0;font-size:13px;font-weight:700;color:var(--primary,#7c3aed);
  display:flex;align-items:center;gap:6px;
}
#resetSection .field{ margin-bottom:0; }
#resetMsg{font-size:12px;display:none;padding:6px 10px;border-radius:8px;margin-top:2px;}
#resetMsg.ok{display:block;background:rgba(16,185,129,.12);color:#10b981;}
#resetMsg.err{display:block;background:rgba(239,68,68,.12);color:#ef4444;}
.reset-submit-btn{
  width:100%;padding:10px;border:none;border-radius:10px;
  background:linear-gradient(135deg,var(--primary,#7c3aed),var(--primary-dark,#5b21b6));
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s;
}
.reset-submit-btn:hover{opacity:.9;}
.reset-cancel-btn{
  width:100%;padding:7px;border:1px solid rgba(124,58,237,.2);
  border-radius:10px;background:transparent;color:var(--text-muted,#8b8a94);
  font-size:13px;cursor:pointer;transition:background .2s;
}
.reset-cancel-btn:hover{background:rgba(124,58,237,.06);}

/* ---- Kullanıcı Yönetimi (Ayarlar) ---- */
.user-list-wrap{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--glass);border:1px solid var(--border);border-radius:10px;}
.user-row-info{flex:1;min-width:0;}
.user-row-info .u-name{font-size:14px;font-weight:600;color:var(--text-main);}
.user-row-info .u-role{font-size:11px;padding:2px 8px;border-radius:5px;display:inline-block;margin-top:2px;font-weight:600;}
.u-role.admin{background:rgba(124,58,237,.15);color:var(--primary,#7c3aed);}
.u-role.user{background:rgba(59,130,246,.15);color:#3b82f6;}
.user-row-actions{display:flex;gap:6px;flex-shrink:0;}
#addUserForm{display:none;flex-direction:column;gap:10px;padding:14px;
  background:rgba(124,58,237,.05);border:1px solid rgba(124,58,237,.18);
  border-radius:12px;margin-top:10px;}
#addUserForm.show{display:flex;animation:loginPop .2s ease-out;}
#editUserModal{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.65);align-items:center;justify-content:center;
}
#editUserModal.show{display:flex;}
#editUserModalCard{
  background:var(--bg-card-solid,#160f28);border:1px solid var(--border);
  border-radius:18px;padding:24px;width:90%;max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* === BLOCK 4: Searchable Select (eski 19763-19817) === */
.ss-wrap{ position:relative; width:100%; }
.ss-input{
  width:100% !important;
  padding:10px 36px 10px 12px !important;
  border:1px solid var(--border, #d1d5db);
  border-radius:8px;
  background: var(--input-bg, #fff);
  color: var(--text, #1a1a2e);
  font-family:inherit; font-size:14px;
  cursor:pointer;
  box-sizing:border-box;
}
.ss-input:focus{ outline:none; border-color: var(--primary,#7c3aed); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.ss-arrow{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:#9ca3af; font-size:12px;
}
.ss-dropdown{
  position:absolute; left:0; right:0; top:calc(100% + 4px);
  background: var(--card-bg, #fff); color: var(--text,#1a1a2e);
  border:1px solid var(--border,#d1d5db); border-radius:10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  z-index:var(--z-modal)9;
  max-height: 280px; overflow:auto;
  display:none;
}
.ss-dropdown.open{ display:block; }
.ss-item{
  padding:10px 12px; cursor:pointer;
  font-size:14px; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.ss-item:last-child{ border-bottom:none; }
.ss-item:hover, .ss-item.active{ background: rgba(124,58,237,.10); color: var(--primary,#7c3aed); }
.ss-item .ss-fav{
  margin-left:auto; color:#d1d5db; cursor:pointer;
  padding:4px; border-radius:4px;
}
.ss-item .ss-fav.on{ color:#f59e0b; }
.ss-item .ss-fav:hover{ background:rgba(0,0,0,.05); }
.ss-section{
  padding:6px 12px; font-size:11px; font-weight:700;
  color:#9ca3af; text-transform:uppercase; letter-spacing:.5px;
  background: rgba(0,0,0,.03);
}
.ss-empty{
  padding:20px 12px; text-align:center; color:#9ca3af; font-size:13px;
}
.ss-add{
  padding:10px 12px; cursor:pointer; font-size:13px;
  color: var(--primary,#7c3aed); font-weight:600;
  border-top:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; gap:8px;
}
.ss-add:hover{ background: rgba(124,58,237,.08); }