/* ══════════════════════════════════════════════════════════════
   TEKNOROX — Page-specific styles (particles, typewriter, eco tabs,
   parallax wave, float animation, hero mockup)
   ══════════════════════════════════════════════════════════════ */

/* ── Background stage: grid paper + ambient blobs + rising particles ── */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #070b14;
  pointer-events: none;
}
.bg-stage::before,
.bg-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.bg-stage::before {
  top: -120px;
  left: -80px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(153, 213, 26, 0.18), transparent 60%);
  animation: bg-blob-drift 22s ease-in-out infinite;
}
.bg-stage::after {
  bottom: -160px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(91, 156, 255, 0.14), transparent 60%);
  animation: bg-blob-drift 28s ease-in-out infinite reverse;
}
.bg-stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 80%);
  opacity: 0.5;
  pointer-events: none;
}
.bg-stage-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-stage-particle {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #99d51a;
  box-shadow: 0 0 12px #99d51a;
  opacity: 0;
  animation: bg-particle-rise var(--dur, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes bg-particle-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: translateY(-120vh) scale(0.4); opacity: 0; }
}
@keyframes bg-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.1); }
  66%      { transform: translate(-30px, 20px) scale(0.95); }
}

/* ── Horizontal SVG flip (used by product-showcase when image side is right) ── */
.svg-flip-x { transform: scaleX(-1); }

/* ── Tech-standards görseller (main + 2 accent) — hafif yüzer animasyon ── */
@keyframes ts-float-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes ts-float-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes ts-float-c {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.ts-main {
  animation: ts-float-a 7.5s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(153, 213, 26, 0.05), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.ts-accent-1 {
  animation: ts-float-b 6s ease-in-out infinite;
  animation-delay: -1.5s;
  box-shadow: 0 0 0 1px rgba(153, 213, 26, 0.05), 0 16px 40px rgba(0, 0, 0, 0.4);
}
.ts-accent-2 {
  animation: ts-float-c 8s ease-in-out infinite;
  animation-delay: -3s;
  box-shadow: 0 0 0 1px rgba(153, 213, 26, 0.05), 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* ── Typewriter cursor ── */
.tw-cursor {
  display: inline-block;
  width: 3px;
  background: #99d51a;
  margin-left: 3px;
  border-radius: 1px;
  vertical-align: baseline;
  animation: tw-blink 1s step-end infinite;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Header: no border bottom ── */
.glass-nav { border-bottom: none !important; box-shadow: 0 4px 32px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04); }

/* ── Ecosystem tabs ── */
.eco-tab { display:flex; align-items:center; gap:8px; padding:10px 20px; border-radius:12px; font-size:13px; font-weight:600; color:#6b7280; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); transition:all .2s; cursor:pointer; }
.eco-tab:hover { color:#e2e2e2; background:rgba(255,255,255,0.06); }
.eco-tab.active { color:#99d51a; background:rgba(153,213,26,0.08); border-color:rgba(153,213,26,0.25); }
.eco-panel { display:none; }
.eco-panel.active { display:grid; }

/* ── Parallax wave ── */
.tkn-waves { position:absolute; bottom:0; width:100%; height:100%; }
.tkn-parallax > use { animation: tkn-wave-move 25s cubic-bezier(.55,.5,.45,.5) infinite; }
.tkn-parallax > use:nth-child(1) { animation-delay:-2s;  animation-duration:7s;  }
.tkn-parallax > use:nth-child(2) { animation-delay:-3s;  animation-duration:13s; }
.tkn-parallax > use:nth-child(3) { animation-delay:-4s;  animation-duration:20s; }
.tkn-parallax > use:nth-child(4) { animation:none; }
@keyframes tkn-wave-move {
  0%   { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0);  }
}

/* ── Float animation ── */
@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
.float-anim { animation: float 4s ease-in-out infinite; }

/* ── Card overflow fix ── */
.card { position: relative; overflow: hidden; }

/* ── CTA Split Layout — image + content yan yana ──────────────────
   DARK MODE (default):
     - Image side: temiz görsel
     - Content side: koyu lacivert gradient + neon vurgu
     - Tüm metin light tonlarda
   LIGHT MODE override'ları light-mode.css'de */
.cta-split {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0b1120;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.cta-split-image {
  background: #0b1120;
}
.cta-split-fade {
  /* Image kenarından content tarafına yumuşak gradient (lg breakpoint+) */
  background: linear-gradient(to right, transparent 60%, rgba(11, 17, 32, 0.85) 100%);
}
@media (max-width: 1023px) {
  .cta-split-fade {
    background: linear-gradient(to bottom, transparent 60%, rgba(11, 17, 32, 0.85) 100%);
  }
}
.cta-split-content {
  background: linear-gradient(160deg, #0d1525 0%, #0b1120 60%, #0f1a2e 100%);
}
.cta-split-deco-line {
  background: linear-gradient(90deg, transparent, rgba(153, 213, 26, 0.45), transparent);
}
.cta-split-deco-glow {
  background: radial-gradient(circle, rgba(153, 213, 26, 0.10) 0%, transparent 70%);
}
.cta-split-label {
  color: #99d51a;
}
.cta-split-title {
  color: #f8fafc;
}
.cta-split-desc {
  color: #94a3b8;
}

/* ── ROX wordmark — Right On eXcellence section ───────────────── */
.rox-wordmark {
  font-family: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #f1f5f9;
}
/* Tüm harfler eşit — R/O/X için ayrı renklendirme yok */
.rox-letter, .rox-rest { color: inherit; font-weight: inherit; }

.rox-tagline {
  font-family: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #99d51a;
  text-shadow: 0 0 14px rgba(153, 213, 26, 0.30);
}
.rox-motto {
  font-family: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  color: #cbd5e1;
  line-height: 1.65;
}

/* Section bg & overlay (default = dark mode) */
.rox-section { position: relative; overflow: hidden; }
.rox-section .rox-bg     { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rox-section .rox-overlay { position: absolute; inset: 0; background: #070b14; opacity: 0.4; }
.rox-section .rox-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at center, transparent 0%, rgba(7,11,20,0.55) 100%);
}
.rox-badge {
  background: rgba(7, 11, 20, 0.7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(153, 213, 26, 0.25);
  color: #e2e8f0;
}