/* ==============================================================================
   Güç Bilişim (gucbilisim.com) - Modern Corporate Light & Dark Theme Engine
   ============================================================================== */

:root {
  --bg-main: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-card: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --primary: #0066ff;
  --primary-hover: #0052cc;
  --cyan-accent: #0284c7;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.08);
}

/* Dark Theme Variables (when html has .dark) */
html.dark {
  --bg-main: #060a12;
  --bg-subtle: #0a0f1d;
  --bg-card: #0d1527;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: rgba(255, 255, 255, 0.08);
  --primary: #0066ff;
  --primary-hover: #0052cc;
  --cyan-accent: #00f0ff;
  --shadow-sm: none;
  --shadow-md: 0 4px 25px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 35px rgba(0, 0, 0, 0.6);
}

/* Base Body */
body {
  background-color: var(--bg-main);
  color: var(--text-secondary);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-subtle);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #1e293b;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

::selection {
  background-color: rgba(0, 102, 255, 0.25);
  color: #0066ff;
}

/* ==============================================================================
   LIGHT THEME OVERRIDES (Default when not in dark mode)
   ============================================================================== */
html:not(.dark) body,
html:not(.dark) .bg-\[\#060A12\] {
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* Backgrounds in Light Mode */
html:not(.dark) .bg-dark-500,
html:not(.dark) .bg-dark-300,
html:not(.dark) [class*="bg-dark-500"],
html:not(.dark) [class*="bg-dark-300"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}

html:not(.dark) .bg-dark-400,
html:not(.dark) .bg-dark-200,
html:not(.dark) .bg-dark-600,
html:not(.dark) [class*="bg-dark-400"],
html:not(.dark) [class*="bg-dark-200"],
html:not(.dark) [class*="bg-dark-600"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Borders in Light Mode */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700,
html:not(.dark) [class*="border-slate-800"],
html:not(.dark) [class*="border-slate-700"] {
  border-color: #e2e8f0 !important;
}

/* Text Colors in Light Mode */
html:not(.dark) .text-white:not(
  .btn-glow, .btn-glow *, 
  .bg-primary, .bg-primary *, 
  .bg-blue-600, .bg-blue-600 *,
  .code-editor-dark, .code-editor-dark *
) {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-100 { color: #0f172a !important; }
html:not(.dark) .text-slate-200 { color: #1e293b !important; }
html:not(.dark) .text-slate-300 { color: #334155 !important; }
html:not(.dark) .text-slate-400 { color: #64748b !important; }
html:not(.dark) .text-slate-500 { color: #94a3b8 !important; }

/* Cyan Accents in Light Mode (Shifted to crisp, highly readable Sky/Blue 600) */
html:not(.dark) .text-cyan-accent {
  color: #0284c7 !important;
}
html:not(.dark) .bg-cyan-accent\/10,
html:not(.dark) .bg-cyan-accent\/15,
html:not(.dark) .bg-cyan-accent\/20 {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

html:not(.dark) .bg-primary-500\/10,
html:not(.dark) .bg-primary-500\/15,
html:not(.dark) .bg-primary-500\/20 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

/* Form Inputs in Light Mode */
html:not(.dark) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
  border-color: #0066ff !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12) !important;
}

/* Tables in Light Mode */
html:not(.dark) table thead {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}
html:not(.dark) table tr:hover {
  background-color: #f8fafc !important;
}

/* ==============================================================================
   GLASSMORPHISM & UI COMPONENTS
   ============================================================================== */

/* Glass Navbar */
.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}
html.dark .glass-nav {
  background: rgba(6, 10, 18, 0.85);
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
}

/* Glass Card */
.glass-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  background: #ffffff;
  border-color: #93c5fd;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(0, 102, 255, 0.14);
}
html.dark .glass-card {
  background: rgba(13, 21, 39, 0.75) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
html.dark .glass-card:hover {
  background: rgba(17, 28, 53, 0.95) !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -10px rgba(0, 102, 255, 0.35) !important;
}

/* Hero Glow */
.hero-glow {
  background: radial-gradient(circle at 50% 30%, rgba(0, 102, 255, 0.08) 0%, rgba(2, 132, 199, 0.03) 50%, transparent 70%);
}
html.dark .hero-glow {
  background: radial-gradient(circle at 50% 30%, rgba(0, 102, 255, 0.25) 0%, rgba(0, 240, 255, 0.12) 40%, rgba(99, 102, 241, 0.05) 60%, transparent 75%) !important;
}

/* Grid Patterns */
.tech-grid {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
html.dark .tech-grid {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
}

/* Buttons */
.btn-glow {
  background: linear-gradient(135deg, #0066ff, #0052cc);
  box-shadow: 0 6px 20px -2px rgba(0, 102, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  transition: all 0.2s ease;
}
.btn-glow:hover {
  box-shadow: 0 10px 28px -2px rgba(0, 102, 255, 0.55);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Dark Code Editor Window in Hero */
.code-editor-dark {
  background-color: #0b1120 !important;
  border: 1px solid #1e293b !important;
  color: #e2e8f0 !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.25) !important;
}
.code-editor-dark * {
  color: inherit;
}
.code-editor-dark .text-slate-500 { color: #64748b !important; }
.code-editor-dark .text-primary-400 { color: #38bdf8 !important; }
.code-editor-dark .text-emerald-400, .code-editor-dark .text-emerald-300 { color: #34d399 !important; }
.code-editor-dark .text-blue-300 { color: #93c5fd !important; }
.code-editor-dark .text-amber-400 { color: #fbbf24 !important; }
.code-editor-dark .text-cyan-accent { color: #38bdf8 !important; }

/* Pulse Keyframes */
@keyframes pulseGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse-slow {
  animation: pulseGlow 3s ease-in-out infinite;
}