/* Yeles Yazilim - Main CSS */
:root {
  --navy: #0B1220;
  --dark: #0F172A;
  --blue: #1E40AF;
  --blue-mid: #1E3A8A;
  --blue-light: #3B82F6;
  --cyan: #60A5FA;
  --white: #FFFFFF;
  --gray-100: #F3F4F6;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --surface: #141C2E;
  --surface2: #1A2540;
  --border: rgba(30,64,175,0.25);
  --border-light: rgba(255,255,255,0.08);
  --font: 'Space Grotesk','Inter','Segoe UI',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono','Consolas',monospace;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px;
  --sh-blue: 0 0 30px rgba(30,64,175,0.35);
  --sh-lg: 0 10px 40px rgba(0,0,0,0.5);
  --t-fast: 0.15s ease; --t-base: 0.3s ease;
  --header-h: 92px;
  --max-w: 1280px;
  --pad: clamp(16px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:var(--navy);color:var(--white);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(60px,8vw,120px) 0}
.section-header{text-align:center;margin-bottom:clamp(40px,6vw,80px)}
.section-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.22);padding:6px 16px;border-radius:100px;margin-bottom:20px}
.section-tag::before{content:'';width:6px;height:6px;background:var(--blue-light);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.section-title{font-size:clamp(28px,4vw,48px);font-weight:700;line-height:1.2;margin-bottom:16px}
.section-title span,.gradient-text{background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-desc{font-size:clamp(15px,1.5vw,18px);color:var(--gray-400);max-width:600px;margin:0 auto;line-height:1.7}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--r-md);font-size:15px;font-weight:600;transition:all var(--t-base);position:relative;overflow:hidden;white-space:nowrap;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--blue-mid),var(--blue));color:#fff;box-shadow:0 4px 20px rgba(30,64,175,.45)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(30,64,175,.55)}
.btn-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--cyan);border:1px solid var(--cyan)}
.btn-outline:hover{background:var(--cyan);color:var(--navy);transform:translateY(-2px)}
.btn-lg{padding:18px 36px;font-size:16px}
.btn-sm{padding:10px 20px;font-size:13px}
.card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--r-lg);padding:32px;transition:all var(--t-base);position:relative;overflow:hidden}
.card:hover{border-color:var(--border);transform:translateY(-4px);box-shadow:var(--sh-blue)}
.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:600}
.badge-blue{background:rgba(30,64,175,.2);color:#93c5fd;border:1px solid rgba(59,130,246,.35)}
.badge-cyan{background:rgba(59,130,246,.12);color:var(--cyan);border:1px solid rgba(96,165,250,.25)}
.badge-green{background:rgba(16,185,129,.1);color:#34d399;border:1px solid rgba(16,185,129,.2)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.aos-fade-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.aos-fade-up.visible{opacity:1;transform:translateY(0)}
.aos-fade-left{opacity:0;transform:translateX(-30px);transition:opacity .6s ease,transform .6s ease}
.aos-fade-left.visible{opacity:1;transform:translateX(0)}
.aos-fade-right{opacity:0;transform:translateX(30px);transition:opacity .6s ease,transform .6s ease}
.aos-fade-right.visible{opacity:1;transform:translateX(0)}
.aos-delay-1{transition-delay:.1s}.aos-delay-2{transition-delay:.2s}.aos-delay-3{transition-delay:.3s}.aos-delay-4{transition-delay:.4s}.aos-delay-5{transition-delay:.5s}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

/* --- CYBERPUNK & FUTURETECH SHOWCASE ADDITIONS --- */
.cyber-bg-dots {
  position: relative;
}
.cyber-bg-dots::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(96,165,250,0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.4;
}

/* Mouse-tracking glowing grid */
.cyber-glow-container {
  position: relative;
}
.cyber-glow-card {
  position: relative;
  overflow: hidden;
}
.cyber-glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(96, 165, 250, 0.06), transparent 40%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Neon Glow utilities */
.glow-cyan {
  text-shadow: 0 0 10px rgba(96,165,250,0.5), 0 0 20px rgba(96,165,250,0.2);
}
.glow-border {
  box-shadow: 0 0 15px rgba(30,64,175,0.2), inset 0 0 15px rgba(96,165,250,0.1);
  border-color: rgba(96,165,250,0.3) !important;
}

/* Scanlines and flicker for retro CLI terminals */
.crt-effect {
  position: relative;
  overflow: hidden;
}
.crt-effect::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 3px, 3px 100%;
  pointer-events: none;
}
.crt-effect::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: crtFlicker 0.15s infinite;
}
@keyframes crtFlicker {
  0% { opacity: 0.17; }
  50% { opacity: 0.13; }
  100% { opacity: 0.15; }
}

/* Terminal typing caret */
.terminal-caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: var(--cyan);
  margin-left: 4px;
  animation: caretBlink 1s step-end infinite;
  vertical-align: middle;
}
@keyframes caretBlink {
  from, to { background-color: transparent }
  50% { background-color: var(--cyan) }
}