/* =============================================
       DESIGN SYSTEM TOKENS
       ============================================= */
    :root {
      /* Colors */
      --color-primary: #2563eb;
      --color-primary-dark: #1d4ed8;
      --color-primary-light: #3b82f6;
      --color-accent: #D4AF37;
      --color-navy: #0B1E36;
      --color-navy-light: #0F294D;
      
      /* Spacing */
      --space-xs: 0.25rem;
      --space-sm: 0.5rem;
      --space-md: 1rem;
      --space-lg: 1.5rem;
      --space-xl: 2rem;
      --space-2xl: 3rem;
      --space-3xl: 4rem;
      
      /* Border Radius */
      --radius-sm: 0.5rem;
      --radius-md: 0.75rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-2xl: 2rem;
      --radius-full: 9999px;
      
      /* Shadows */
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --shadow-premium: 0 25px 50px -12px rgb(0 0 0 / 0.25);
      --shadow-glow-blue: 0 0 30px rgba(37, 99, 235, 0.4);
      --shadow-glow-gold: 0 0 30px rgba(212, 175, 55, 0.3);
      
      /* Borders */
      --border-light: 1px solid rgba(226, 232, 240, 0.8);
      --border-dark: 1px solid rgba(255, 255, 255, 0.1);
      
      /* Transitions */
      --transition-fast: 150ms ease;
      --transition-base: 300ms ease;
      --transition-slow: 500ms ease;
      
      /* Typography */
      --font-sans: 'Poppins', system-ui, sans-serif;
      
      /* Z-Index Scale */
      --z-dropdown: 50;
      --z-sticky: 100;
      --z-modal: 200;
      --z-toast: 300;
    }
    
    /* =============================================
       ACCESSIBILITY: 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;
      }
      
      .electric-particle,
      .timeline-node.charged::after,
      #electric-wave-overlay,
      #electric-flash-overlay,
      .checkup-grid-bg,
      .checkup-radar,
      .parallax-layer {
        animation: none !important;
      }
      
      .hero-blob {
        filter: blur(80px);
        animation: none !important;
      }
    }
    
    /* =============================================
       PREMIUM CARD INTERACTIONS
       ============================================= */
    .card-premium {
      position: relative;
      transition: transform var(--transition-base), box-shadow var(--transition-base);
    }
    
    .card-premium::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(212, 175, 55, 0.2), rgba(37, 99, 235, 0.3));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity var(--transition-base);
    }
    
    .card-premium:hover::before {
      opacity: 1;
    }
    
    .card-premium:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-xl);
    }
    
    /* Light sweep effect */
    .light-sweep {
      position: relative;
      overflow: hidden;
    }
    
    .light-sweep::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transform: skewX(-25deg);
      transition: none;
    }
    
    .light-sweep:hover::after {
      animation: lightSweep 0.8s ease-out;
    }
    
    @keyframes lightSweep {
      0% { left: -100%; }
      100% { left: 200%; }
    }
    
    @media (prefers-reduced-motion: reduce) {
      .light-sweep:hover::after {
        animation: none;
      }
      .card-premium:hover {
        transform: none;
      }
    }
    
    /* =============================================
       COUNT-UP ANIMATION
       ============================================= */
    .count-up {
      font-variant-numeric: tabular-nums;
    }
    
    /* Electric Timeline Animations - Elegant & Subtle */
    @keyframes electric-flow-subtle {
      0% { transform: translateY(-100%); opacity: 0; }
      5% { opacity: 0.6; }
      95% { opacity: 0.6; }
      100% { transform: translateY(500%); opacity: 0; }
    }
    @keyframes electric-pulse-soft {
      0%, 100% { opacity: 0.3; transform: scale(1); box-shadow: 0 0 4px rgba(59, 130, 246, 0.3); }
      50% { opacity: 0.6; transform: scale(1.05); box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); }
    }
    @keyframes node-charge-elegant {
      0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
      50% { box-shadow: 0 0 12px 3px rgba(59, 130, 246, 0.4); }
      100% { box-shadow: 0 0 16px 4px rgba(59, 130, 246, 0.5); }
    }
    @keyframes electric-wave-expand {
      0% { transform: scale(0); opacity: 0.8; }
      50% { opacity: 0.5; }
      100% { transform: scale(3); opacity: 0; }
    }
    @keyframes lightning-branch {
      0% { opacity: 0; stroke-dashoffset: 100; }
      15% { opacity: 0.8; }
      100% { opacity: 0; stroke-dashoffset: 0; }
    }
    @keyframes site-electric-flash-subtle {
      0% { opacity: 0; }
      10% { opacity: 0.08; }
      20% { opacity: 0; }
      30% { opacity: 0.12; }
      50% { opacity: 0.05; }
      100% { opacity: 0; }
    }
    @keyframes glow-breathe {
      0%, 100% { filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4)); }
      50% { filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.7)); }
    }
    @keyframes line-glow-pulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
    
    /* Electric Line Container - Behind content */
    .electric-line-container { 
      position: relative;
      z-index: 0;
    }
    
    /* Electric Particles - Thin & Elegant */
    .electric-particle {
      position: absolute;
      width: 2px;
      height: 8px;
      background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.7), rgba(96, 165, 250, 0.5), transparent);
      border-radius: 1px;
      left: 50%;
      transform: translateX(-50%);
      animation: electric-flow-subtle 3s linear infinite;
      filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.5));
      opacity: 0.7;
    }
    .electric-particle:nth-child(1) { animation-delay: 0s; }
    .electric-particle:nth-child(2) { animation-delay: 0.6s; }
    .electric-particle:nth-child(3) { animation-delay: 1.2s; }
    .electric-particle:nth-child(4) { animation-delay: 1.8s; }
    .electric-particle:nth-child(5) { animation-delay: 2.4s; }
    
    /* Timeline Node - Charged State */
    .timeline-node.charged {
      animation: node-charge-elegant 0.6s ease-out forwards;
      border-color: #3b82f6 !important;
      background: radial-gradient(circle, #eff6ff 0%, #ffffff 70%) !important;
    }
    html.dark .timeline-node.charged {
      background: radial-gradient(circle, #1e40af 0%, #0f172a 70%) !important;
      border-color: #60a5fa !important;
    }
    .timeline-node.charged::after {
      content: '';
      position: absolute;
      width: 180%;
      height: 180%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid rgba(59, 130, 246, 0.4);
      animation: electric-pulse-soft 2s ease-in-out infinite;
      pointer-events: none;
    }
    
    /* Electric Wave Overlay - Subtle Flash */
    #electric-wave-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100dvh;
      height: var(--app-height, 100vh);
      pointer-events: none;
      z-index: 9999;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    #electric-wave-overlay.active { opacity: 1; }
    #electric-wave-overlay .wave-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(59, 130, 246, 0.6);
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), inset 0 0 15px rgba(59, 130, 246, 0.15);
      animation: electric-wave-expand 1.2s ease-out forwards;
    }
    
    /* Flash Overlay */
    #electric-flash-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 9998;
      background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
      opacity: 0;
    }
    #electric-flash-overlay.active {
      animation: site-electric-flash-subtle 1.2s ease-out forwards;
    }
    
    /* Dark Mode - Electric Effects */
    html.dark #electric-flash-overlay {
      background: radial-gradient(circle at center, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
    }
    html.dark #electric-wave-overlay .wave-ring {
      border-color: rgba(96, 165, 250, 0.7);
      box-shadow: 0 0 30px rgba(96, 165, 250, 0.4), inset 0 0 20px rgba(147, 197, 253, 0.2);
    }
    html.dark .electric-particle {
      background: linear-gradient(to bottom, transparent, rgba(96, 165, 250, 0.8), rgba(147, 197, 253, 0.6), transparent);
      filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.6));
    }
    html.dark .timeline-node.charged::after {
      border-color: rgba(96, 165, 250, 0.5);
    }
    
    /* =============================================
       TIMELINE FINAL LIGHTNING EXPLOSION EFFECT
       - Subtle background effect behind content
       - Triggered once per page visit
       - Duration: 2.5 seconds
       ============================================= */
    #lightning-explosion-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100dvh;
      height: var(--app-height, 100vh);
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.5s ease-out;
    }
    
    #lightning-explosion-overlay.active {
      opacity: 1;
    }
    
    #lightning-explosion-overlay.fade-out {
      opacity: 0;
      transition: opacity 0.8s ease-out;
    }
    
    /* Flash background - subtle */
    .lightning-flash-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at var(--origin-x, 50%) var(--origin-y, 50%), 
        rgba(147, 197, 253, 0.08) 0%, 
        rgba(59, 130, 246, 0.04) 30%,
        transparent 60%);
      animation: lightning-flash-pulse 0.4s ease-out;
    }
    
    html.dark .lightning-flash-bg {
      background: radial-gradient(ellipse at var(--origin-x, 50%) var(--origin-y, 50%), 
        rgba(147, 197, 253, 0.12) 0%, 
        rgba(96, 165, 250, 0.06) 30%,
        transparent 60%);
    }
    
    @keyframes lightning-flash-pulse {
      0% { opacity: 0; transform: scale(0.9); }
      40% { opacity: 1; transform: scale(1); }
      100% { opacity: 0.3; transform: scale(1.1); }
    }
    
    /* Lightning bolt SVG styles - subtle */
    .lightning-bolt {
      position: absolute;
      pointer-events: none;
      filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.3));
    }
    
    html.dark .lightning-bolt {
      filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.4));
    }
    
    .lightning-bolt path {
      stroke: rgba(147, 197, 253, 0.25);
      stroke-width: 1;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    
    html.dark .lightning-bolt path {
      stroke: rgba(147, 197, 253, 0.35);
      stroke-width: 1.5;
    }
    
    /* Animate lightning drawing */
    @keyframes draw-lightning {
      0% { stroke-dashoffset: var(--path-length); opacity: 0; }
      10% { opacity: 1; }
      50% { opacity: 1; }
      100% { stroke-dashoffset: 0; opacity: 0.7; }
    }
    
    @keyframes lightning-glow-pulse {
      0%, 100% { filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); }
      50% { filter: drop-shadow(0 0 20px rgba(147, 197, 253, 0.9)) drop-shadow(0 0 40px rgba(59, 130, 246, 0.6)); }
    }
    
    /* Spark particles - subtle */
    .lightning-spark {
      position: absolute;
      width: 2px;
      height: 2px;
      background: radial-gradient(circle, rgba(147, 197, 253, 0.6) 0%, rgba(59, 130, 246, 0.3) 50%, transparent 100%);
      border-radius: 50%;
      pointer-events: none;
      animation: spark-fly var(--duration, 1.5s) ease-out forwards;
    }
    
    @keyframes spark-fly {
      0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
      }
      60% {
        opacity: 0.4;
      }
      100% {
        transform: translate(var(--tx, 100px), var(--ty, -100px)) scale(0);
        opacity: 0;
      }
    }
    
    /* Electric arc effect - subtle */
    .electric-arc {
      position: absolute;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(147, 197, 253, 0.2) 20%, 
        rgba(147, 197, 253, 0.4) 50%, 
        rgba(147, 197, 253, 0.2) 80%, 
        transparent);
      height: 1px;
      border-radius: 1px;
      transform-origin: left center;
      animation: arc-flash var(--arc-duration, 0.3s) ease-out forwards;
    }
    
    html.dark .electric-arc {
      background: linear-gradient(90deg, 
        transparent, 
        rgba(96, 165, 250, 0.3) 20%, 
        rgba(147, 197, 253, 0.5) 50%, 
        rgba(96, 165, 250, 0.3) 80%, 
        transparent);
      height: 1px;
    }
    
    @keyframes arc-flash {
      0% { transform: scaleX(0); opacity: 0; }
      30% { opacity: 0.5; }
      100% { transform: scaleX(1); opacity: 0; }
    }
    
    /* Neon Line Glow Effect */
    #neon-line {
      position: relative;
    }
    #neon-line::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      background: #3b82f6;
      border-radius: 50%;
      box-shadow: 0 0 10px 3px rgba(59, 130, 246, 0.6);
      animation: line-glow-pulse 1.5s ease-in-out infinite;
    }
    html.dark #neon-line::after {
      background: #60a5fa;
      box-shadow: 0 0 12px 4px rgba(96, 165, 250, 0.7);
    }
    
    /* Mobile optimizations */
    @media (max-width: 768px) {
      .electric-particle {
        width: 1.5px;
        height: 5px;
        opacity: 0.5;
      }
      .timeline-node.charged::after {
        width: 150%;
        height: 150%;
        border-width: 1px;
      }
      #electric-wave-overlay .wave-ring {
        border-width: 1px;
      }
      #neon-line::after {
        width: 3px;
        height: 3px;
        box-shadow: 0 0 6px 2px rgba(59, 130, 246, 0.5);
      }
      /* Lightning explosion - subtle on mobile */
      #lightning-explosion-overlay {
        z-index: 1;
      }
      .lightning-bolt path {
        stroke-width: 0.75;
        stroke: rgba(147, 197, 253, 0.2);
      }
      .lightning-spark {
        width: 1.5px;
        height: 1.5px;
      }
      .electric-arc {
        height: 0.5px;
      }
      @keyframes electric-flow-subtle {
        0% { transform: translateY(-100%); opacity: 0; }
        5% { opacity: 0.4; }
        95% { opacity: 0.4; }
        100% { transform: translateY(300%); opacity: 0; }
      }
      /* Timeline card mobile spacing */
      .timeline-card {
        margin-bottom: 1rem;
      }
    }
    
    /* Spark Container (legacy - kept for compatibility) */
    .spark-container {
      display: none;
    }
    .spark {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #60a5fa;
      border-radius: 50%;
      filter: drop-shadow(0 0 4px #3b82f6);
      animation: spark-flicker 0.8s ease-in-out infinite;
    }
    .connector-glow {
      background: linear-gradient(90deg, #0B1E36 0%, #D4AF37 50%, #0B1E36 100%);
      background-size: 200% 100%;
      animation: dataflow-shine 4s linear infinite;
    }
    @keyframes dataflow-shine {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    .timeline-icon-pulse { animation: glow-breathe 2.5s ease-in-out infinite; }
    html { scroll-behavior: smooth; }
    .hero-blob { filter: blur(80px); }
    .btn-hero-primary:hover { box-shadow: 0 8px 32px rgba(29,78,216,0.35), 0 0 40px rgba(212,175,55,0.25); }
    /* Nav: Light theme - white at top, navy after scroll; readable text */
    #main-nav {
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    /* Light theme - SAYDAM at top: transparent, beyaz yazi (hero uzerinde) */
    html:not(.dark) #main-nav:not(.nav-scrolled) {
      background: transparent;
      border-color: transparent;
      backdrop-filter: blur(8px);
    }
    html:not(.dark) #main-nav:not(.nav-scrolled) .nav-link {
      color: #ffffff !important;
    }
    html:not(.dark) #main-nav:not(.nav-scrolled) .nav-link:hover,
    html:not(.dark) #main-nav:not(.nav-scrolled) .nav-link.text-blue-600 {
      color: rgb(96 165 250) !important;
    }
    html:not(.dark) #main-nav:not(.nav-scrolled) .logo-light { display: block !important; }
    html:not(.dark) #main-nav:not(.nav-scrolled) .logo-dark { display: none !important; }
    html:not(.dark) #main-nav:not(.nav-scrolled) .lang-selector-btn {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.4);
      color: #ffffff;
    }
    html:not(.dark) #main-nav:not(.nav-scrolled) .lang-selector-btn:hover {
      background: rgba(255, 255, 255, 0.4);
    }
    html:not(.dark) #main-nav:not(.nav-scrolled) #theme-toggle {
      background: rgba(255, 255, 255, 0.25);
      color: #ffffff;
    }
    html:not(.dark) #main-nav:not(.nav-scrolled) #theme-toggle:hover {
      background: rgba(255, 255, 255, 0.4);
    }
    html:not(.dark) #main-nav:not(.nav-scrolled) .menu-btn {
      color: #ffffff;
    }
    /* Beyaz tema – scroll sonrası beyaz/açık header */
    html:not(.dark) #main-nav.nav-scrolled {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(226, 232, 240, 0.9);
      backdrop-filter: blur(18px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    html:not(.dark) #main-nav.nav-scrolled .nav-link {
      color: #1e293b;
    }
    html:not(.dark) #main-nav.nav-scrolled .nav-link:hover,
    html:not(.dark) #main-nav.nav-scrolled .nav-link.text-blue-400,
    html:not(.dark) #main-nav.nav-scrolled .nav-link.text-blue-600 {
      color: rgb(37 99 235) !important;
    }
    /* Beyaz tema scroll: logo swap – top’ta koyu (beyaz bg), scroll’da açık (navy bg) */
    html:not(.dark) #main-nav.nav-scrolled .logo-light { display: none !important; }
    html:not(.dark) #main-nav.nav-scrolled .logo-dark { display: block !important; }
    /* Koyu tema – teksen-logo1 kullan (logo-light) */
    html.dark #main-nav .logo-light { display: block !important; }
    html.dark #main-nav .logo-dark { display: none !important; }
    html.dark #main-nav {
      background: transparent;
      border-color: transparent;
    }
    html.dark #main-nav.nav-scrolled {
      background: rgba(2, 6, 23, 0.9);
      border-color: rgba(51, 65, 85, 0.7);
      backdrop-filter: blur(18px);
    }
    html.dark #main-nav .nav-link {
      color: #f1f5f9;
    }
    html.dark #main-nav .nav-link.text-blue-400 {
      color: rgb(96 165 250) !important;
    }
    #main-nav .nav-link {
      transition: color 0.2s ease, opacity 0.2s ease;
    }
    #main-nav .menu-btn {
      transition: color 0.2s;
    }
    #main-nav #mobile-menu {
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    html.dark #main-nav.nav-scrolled {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    /* Light theme scroll: lang and theme buttons – açık arka planda koyu stiller */
    html:not(.dark) #main-nav.nav-scrolled .lang-selector-btn {
      background: rgba(241, 245, 249, 0.9);
      border-color: rgba(226, 232, 240, 0.9);
      color: #1e293b;
    }
    html:not(.dark) #main-nav.nav-scrolled .lang-selector-btn:hover {
      background: rgba(226, 232, 240, 0.95);
      color: #0f172a;
    }
    html:not(.dark) #main-nav.nav-scrolled .menu-btn {
      color: #1e293b;
    }
    html:not(.dark) #main-nav.nav-scrolled #theme-toggle {
      background: rgba(241, 245, 249, 0.9);
      color: #475569;
    }
    html:not(.dark) #main-nav.nav-scrolled #theme-toggle:hover {
      background: rgba(226, 232, 240, 0.95);
      color: #1e293b;
    }

    /* Touch targets: WCAG 2.5.5 min 44px on mobile */
    @media (max-width: 768px) {
      #main-nav .nav-link,
      #main-nav .menu-btn,
      .lang-selector-btn,
      #main-nav [data-lang-option],
      #theme-toggle {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      #main-nav .nav-link { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    }

    /* Check-up: arka plan ızgara */
    .checkup-grid-bg {
      background-image: linear-gradient(rgba(37,99,235,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,0.4) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: checkup-grid-rotate 30s linear infinite;
    }
    @keyframes checkup-grid-rotate {
      from { transform: perspective(500px) rotateX(60deg) rotate(0deg); }
      to { transform: perspective(500px) rotateX(60deg) rotate(360deg); }
    }
    /* Check-up: radar / yükleniyor çemberi */
    .checkup-radar { animation: checkup-spin 1s linear infinite; }
    @keyframes checkup-spin {
      to { transform: rotate(360deg); }
    }
    /* Check-up: 9 adımlı slider – her adım viewport genişliğinde (slider'ın 1/9'u) */
    .checkup-slider { transition: transform 0.5s ease-out; }
    .checkup-step { flex: 0 0 11.111%; width: 11.111%; min-width: 11.111%; box-sizing: border-box; }
    /* İlerleme çubuğu animasyonu */
    .checkup-progress-fill { transition: width 0.5s ease-out; }
    /* Check-up range slider (beyaz/cam panel için) */
    #checkup-team-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 24px; height: 24px;
      border-radius: 50%;
      background: #2563EB;
      cursor: pointer;
      box-shadow: 0 0 12px rgba(37,99,235,0.6);
    }
    #checkup-team-slider::-moz-range-thumb {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: #2563EB;
      cursor: pointer;
      box-shadow: 0 0 12px rgba(37,99,235,0.6);
      border: 0;
    }
    
    /* Portfolio: Koyu temada logo arkası güçlü beyaz glow */
    html.dark #portfolio a.group {
      position: relative;
    }
    html.dark #portfolio a.group::before {
      content: '';
      position: absolute;
      inset: 5%;
      background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 35%, rgba(255,255,255,0.1) 60%, transparent 80%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }
    html.dark #portfolio a.group img {
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 0 24px rgba(255,255,255,0.35)) drop-shadow(0 0 48px rgba(255,255,255,0.2));
    }

    /* Reference Card Mobile Touch Support */
    @media (max-width: 768px) {
      .reference-card:active img {
        opacity: 0.6 !important;
        transform: scale(1.25) translateX(8px) !important;
      }
      .reference-card:active span[class*="absolute"] {
        opacity: 1 !important;
        left: -2.5rem !important;
      }
    }
    
    /* Reference Card Logo Tooltip Animation */
    .reference-card .group-hover\\:opacity-100 {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* =============================================
       FOOTER ELECTRIC EFFECTS
       ============================================= */
    .footer-electric {
      position: relative;
      overflow: hidden;
    }
    
    /* Electric Grid Background */
    .footer-electric-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: 
        linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      animation: footer-grid-pulse 8s ease-in-out infinite;
    }
    
    .dark .footer-electric-grid {
      background-image: 
        linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
    }
    
    @keyframes footer-grid-pulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.7; }
    }
    
    /* Electric Circuit Lines */
    .footer-circuit-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    
    .footer-circuit-line {
      position: absolute;
      background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.15), transparent);
      height: 1px;
      animation: circuit-flow 6s linear infinite;
    }
    
    .dark .footer-circuit-line {
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.5), rgba(59, 130, 246, 0.2), transparent);
    }
    
    .footer-circuit-line:nth-child(1) { top: 15%; width: 60%; left: -30%; animation-delay: 0s; }
    .footer-circuit-line:nth-child(2) { top: 35%; width: 80%; left: -40%; animation-delay: 2s; }
    .footer-circuit-line:nth-child(3) { top: 55%; width: 50%; left: -25%; animation-delay: 4s; }
    .footer-circuit-line:nth-child(4) { top: 75%; width: 70%; left: -35%; animation-delay: 1s; }
    .footer-circuit-line:nth-child(5) { top: 90%; width: 90%; left: -45%; animation-delay: 3s; }
    
    @keyframes circuit-flow {
      0% { transform: translateX(0); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateX(200%); opacity: 0; }
    }
    
    /* Vertical Circuit Lines */
    .footer-circuit-line-v {
      position: absolute;
      background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.1), transparent);
      width: 1px;
      height: 100%;
      animation: circuit-flow-v 8s linear infinite;
    }
    
    .dark .footer-circuit-line-v {
      background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.4), rgba(59, 130, 246, 0.15), transparent);
    }
    
    .footer-circuit-line-v:nth-child(6) { left: 10%; animation-delay: 0s; }
    .footer-circuit-line-v:nth-child(7) { left: 30%; animation-delay: 2s; }
    .footer-circuit-line-v:nth-child(8) { left: 50%; animation-delay: 4s; }
    .footer-circuit-line-v:nth-child(9) { left: 70%; animation-delay: 1s; }
    .footer-circuit-line-v:nth-child(10) { left: 90%; animation-delay: 3s; }
    
    @keyframes circuit-flow-v {
      0% { transform: translateY(-100%); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateY(100%); opacity: 0; }
    }
    
    /* Electric Nodes (Junction Points) */
    .footer-electric-node {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(37, 99, 235, 0.4);
      box-shadow: 0 0 10px rgba(37, 99, 235, 0.3), 0 0 20px rgba(37, 99, 235, 0.2);
      animation: node-pulse 3s ease-in-out infinite;
    }
    
    .dark .footer-electric-node {
      background: rgba(96, 165, 250, 0.6);
      box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.3);
    }
    
    .footer-electric-node:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
    .footer-electric-node:nth-child(2) { top: 40%; left: 45%; animation-delay: 0.5s; }
    .footer-electric-node:nth-child(3) { top: 60%; left: 75%; animation-delay: 1s; }
    .footer-electric-node:nth-child(4) { top: 30%; left: 85%; animation-delay: 1.5s; }
    .footer-electric-node:nth-child(5) { top: 70%; left: 25%; animation-delay: 2s; }
    .footer-electric-node:nth-child(6) { top: 85%; left: 55%; animation-delay: 2.5s; }
    
    @keyframes node-pulse {
      0%, 100% { transform: scale(1); opacity: 0.4; }
      50% { transform: scale(1.8); opacity: 0.8; }
    }
    
    /* Electric Spark Effect */
    .footer-spark {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #60a5fa;
      border-radius: 50%;
      animation: spark-float 4s ease-in-out infinite;
      pointer-events: none;
    }
    
    .footer-spark::after {
      content: '';
      position: absolute;
      inset: -4px;
      background: radial-gradient(circle, rgba(96, 165, 250, 0.4), transparent 70%);
      border-radius: 50%;
    }
    
    @keyframes spark-float {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
      20% { opacity: 1; }
      50% { transform: translate(30px, -20px) scale(1.5); opacity: 0.8; }
      80% { opacity: 1; }
      100% { transform: translate(60px, 10px) scale(0.5); opacity: 0; }
    }
    
    .footer-spark:nth-child(1) { top: 25%; left: 20%; animation-delay: 0s; }
    .footer-spark:nth-child(2) { top: 45%; left: 60%; animation-delay: 1s; }
    .footer-spark:nth-child(3) { top: 65%; left: 35%; animation-delay: 2s; }
    .footer-spark:nth-child(4) { top: 35%; left: 80%; animation-delay: 3s; }
    .footer-spark:nth-child(5) { top: 75%; left: 50%; animation-delay: 0.5s; }
    .footer-spark:nth-child(6) { top: 55%; left: 10%; animation-delay: 1.5s; }
    .footer-spark:nth-child(7) { top: 15%; left: 70%; animation-delay: 2.5s; }
    .footer-spark:nth-child(8) { top: 85%; left: 40%; animation-delay: 3.5s; }
    
    /* Top Edge Glow */
    .footer-top-glow {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(37, 99, 235, 0.3) 20%, 
        rgba(59, 130, 246, 0.6) 50%, 
        rgba(37, 99, 235, 0.3) 80%, 
        transparent);
      animation: top-glow-pulse 4s ease-in-out infinite;
    }
    
    .footer-top-glow::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), transparent);
      pointer-events: none;
    }
    
    .dark .footer-top-glow {
      background: linear-gradient(90deg, 
        transparent, 
        rgba(59, 130, 246, 0.4) 20%, 
        rgba(96, 165, 250, 0.8) 50%, 
        rgba(59, 130, 246, 0.4) 80%, 
        transparent);
    }
    
    .dark .footer-top-glow::after {
      background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), transparent);
    }
    
    @keyframes top-glow-pulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    
    /* Gradient Overlay for Depth */
    .footer-gradient-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: 
        radial-gradient(ellipse 80% 50% at 20% 100%, rgba(37, 99, 235, 0.06), transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59, 130, 246, 0.04), transparent 40%);
    }
    
    .dark .footer-gradient-overlay {
      background: 
        radial-gradient(ellipse 80% 50% at 20% 100%, rgba(37, 99, 235, 0.15), transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59, 130, 246, 0.1), transparent 40%);
    }
    
    /* Electric Wave Animation */
    .footer-wave {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.02));
      pointer-events: none;
    }
    
    .dark .footer-wave {
      background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.05));
    }
    
    /* Footer Content Z-Index */
    .footer-content {
      position: relative;
      z-index: 10;
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
      .footer-electric-grid,
      .footer-circuit-line,
      .footer-circuit-line-v,
      .footer-electric-node,
      .footer-spark,
      .footer-top-glow {
        animation: none !important;
      }
    }