/* Gençtürkler Savunma Sanayi - Custom Stylesheet */

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

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-display: "Space Grotesk", sans-serif;

  /* Default Light Theme Colors (Default) */
  --color-app-bg: #ffffff;
  --color-panel-bg: #fafafa;
  --color-border: #e4e4e7;
  --color-border-subtle: #d4d4d8;
  --color-text-muted: #71717a;
  --color-text-sub: #52525b;
  --color-text-main: #18181b;

  --color-black: #fafafa;
  --color-white: #09090b;
  --color-accent: #dc2626;
  --color-accent-subtle: rgba(220, 38, 38, 0.08);
  --color-grid: rgba(9, 9, 11, 0.05);
}

/* Dark Theme overrides */
html.dark-theme {
  --color-app-bg: #09090b;       /* zinc-950 */
  --color-panel-bg: #18181b;     /* zinc-900 */
  --color-border: #27272a;       /* zinc-800 */
  --color-border-subtle: #3f3f46;/* zinc-700 */
  --color-text-muted: #71717a;   /* zinc-500 */
  --color-text-sub: #a1a1aa;     /* zinc-400 */
  --color-text-main: #f4f4f5;    /* zinc-100 */

  --color-black: #000000;
  --color-white: #ffffff;
  --color-accent: #dc2626;       /* red-600 */
  --color-accent-subtle: rgba(220, 38, 38, 0.1);
  --color-grid: rgba(255, 255, 255, 0.05);
}

/* Apply system variables to standard layout */
body {
  background-color: var(--color-app-bg);
  color: var(--color-text-main);
  font-family: var(--font-sans);
  transition: background-color 0.4s ease, color 0.4s ease;
}

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

.font-display {
  font-family: var(--font-display) !important;
}

/* Background Grids */
.bg-grid-zinc {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
}

.bg-dot-pattern {
  background-image: radial-gradient(rgba(220, 38, 38, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Radar Sweep Effect */
.radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(220, 38, 38, 0.1) 90%, rgba(220, 38, 38, 0.4) 100%);
  animation: sweep 4s linear infinite;
  transform-origin: 0 0;
  pointer-events: none;
}

@keyframes sweep {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Glitch Text Effect */
.glitch-text {
  position: relative;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 red;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 blue;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(10px, 9999px, 83px, 0); }
  20% { clip: rect(62px, 9999px, 3px, 0); }
  40% { clip: rect(54px, 9999px, 8px, 0); }
  60% { clip: rect(81px, 9999px, 69px, 0); }
  80% { clip: rect(7px, 9999px, 95px, 0); }
  100% { clip: rect(82px, 9999px, 49px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(65px, 9999px, 100px, 0); }
  20% { clip: rect(32px, 9999px, 4px, 0); }
  40% { clip: rect(4px, 9999px, 83px, 0); }
  60% { clip: rect(84px, 9999px, 66px, 0); }
  80% { clip: rect(1px, 9999px, 46px, 0); }
  100% { clip: rect(67px, 9999px, 45px, 0); }
}

.glow-red {
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.4), inset 0 0 10px rgba(220, 38, 38, 0.2);
}

.circuit-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23dc2626' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* UAV HUD */
.hud-grid {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(220, 38, 38, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(220, 38, 38, 0.12) 1px, transparent 1px);
  animation: fly-forward 5s linear infinite;
}
@keyframes fly-forward {
  from { background-position: 0 0; }
  to { background-position: 0 50px; }
}

/* Shield Pulse */
.shield-pulse {
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
  animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  70% { box-shadow: 0 0 0 50px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Jamming Static Noise */
.jamming-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.3'/%3E%3C/svg%3E");
  animation: static-flicker 0.1s infinite;
}
@keyframes static-flicker {
  0% { transform: translate(1px, 1px); }
  20% { transform: translate(-1px, -2px); }
  40% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -1px); }
  80% { transform: translate(1px, 2px); }
  100% { transform: translate(-1px, 1px); }
}

/* Terminal text for Phreaking */
.terminal-text {
  text-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

/* Scan line */
.scan-line-vertical {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(220, 38, 38, 0.8);
  box-shadow: 0 0 20px rgba(220, 38, 38, 1);
  animation: scan-vertical 4s linear infinite;
  z-index: 20;
  pointer-events: none;
}
@keyframes scan-vertical {
  0% { top: -10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* Node line stroke flow animation */
.node-line {
  stroke-dasharray: 10;
  animation: flow 20s linear infinite;
}
@keyframes flow {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}

/* Admin Dashboard Specific Enhancements */
.admin-sidebar {
  border-right: 1px solid var(--color-border);
}
.admin-card {
  background-color: var(--color-panel-bg);
  border: 1px solid var(--color-border);
}

/* Global Form Controls Theme Adaptivity Overrides */
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  background-color: var(--color-app-bg) !important;
  color: var(--color-text-main) !important;
  border-color: var(--color-border) !important;
  transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent) !important;
  background-color: var(--color-panel-bg) !important;
  box-shadow: 0 0 10px var(--color-accent-subtle) !important;
}

/* Light Theme Utility Overrides for Legibility */
html.light-theme .text-white {
  color: var(--color-text-main) !important;
}

html.light-theme .bg-black {
  background-color: var(--color-panel-bg) !important;
}

html.light-theme .border-zinc-800 {
  border-color: var(--color-border) !important;
}

html.light-theme .text-zinc-100 {
  color: var(--color-text-main) !important;
}

html.light-theme .text-zinc-400 {
  color: var(--color-text-sub) !important;
}

html.light-theme .text-zinc-500 {
  color: var(--color-text-muted) !important;
}

html.light-theme .bg-zinc-950\/90 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

html.light-theme .bg-black\/30,
html.light-theme .bg-black\/50 {
  background-color: rgba(9, 9, 11, 0.04) !important;
}

html.light-theme .bg-black\/60 {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

html.light-theme nav.fixed {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: var(--color-border) !important;
}

html.light-theme nav.fixed a {
  color: var(--color-text-sub) !important;
}

html.light-theme nav.fixed a:hover {
  color: var(--color-accent) !important;
}

html.light-theme nav.fixed span {
  color: var(--color-text-main) !important;
}

html.light-theme select option {
  background-color: var(--color-panel-bg) !important;
  color: var(--color-text-main) !important;
}