/* ==========================================================================
   Yunus Koca — Web Geliştirici & Dijital Çözümler
   Ortak stil katmanı (Tailwind CDN üzerine)
   ========================================================================== */

:root {
  --night: #0a0f1d;
  --night-2: #0d1426;
  --cyber: #00E5FF;
  --electric: #1E7BFF;
  --text: #e6f1ff;
  --muted: #8a98b3;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --header-h: 76px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  background: var(--night);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(0, 229, 255, .3); color: #fff; }

/* Kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #070b16; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--electric), var(--cyber)); border-radius: 10px; border: 2px solid #070b16; }

/* Odak görünürlüğü */
:focus-visible { outline: 2px solid var(--cyber); outline-offset: 3px; border-radius: 6px; }

/* --------------------------------------------------------------------------
   Arka plan katmanları
   -------------------------------------------------------------------------- */
.bg-grid {
  background-image:
    linear-gradient(rgba(0, 229, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.bg-noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orb {
  position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .55; pointer-events: none;
  animation: orb-float 16s ease-in-out infinite;
}
.orb-cyan { background: radial-gradient(circle, rgba(0, 229, 255, .65), transparent 65%); }
.orb-blue { background: radial-gradient(circle, rgba(30, 123, 255, .7), transparent 65%); animation-delay: -6s; }
@keyframes orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(40px, -30px, 0) scale(1.08); }
  66% { transform: translate3d(-30px, 25px, 0) scale(.95); }
}

/* --------------------------------------------------------------------------
   Cam efekti (glassmorphism)
   -------------------------------------------------------------------------- */
.glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
.glass-strong {
  background: rgba(10, 15, 29, .72);
  border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
}

/* Parlayan kenarlı kart */
.card-glow { position: relative; isolation: isolate; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s, border-color .45s; }
.card-glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background: linear-gradient(135deg, rgba(0, 229, 255, .0), rgba(0, 229, 255, .0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background .45s;
}
.card-glow:hover { transform: translateY(-6px); box-shadow: 0 25px 60px -20px rgba(0, 229, 255, .35); }
.card-glow:hover::before { background: linear-gradient(135deg, rgba(0, 229, 255, .8), rgba(30, 123, 255, .2) 50%, rgba(0, 229, 255, .6)); }

/* Fare takipli ışık (main.js --mx/--my değişkenlerini ayarlar) */
.spotlight { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 229, 255, .10), transparent 45%); }

/* --------------------------------------------------------------------------
   Tipografi yardımcıları
   -------------------------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(100deg, #ffffff 0%, #b8f6ff 35%, var(--cyber) 60%, var(--electric) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% auto; animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cyber);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyber), transparent); }

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 600; border-radius: 14px; padding: .9rem 1.5rem; line-height: 1;
  transition: transform .25s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  color: #041018;
  background: linear-gradient(110deg, var(--cyber), #3fd0ff 45%, var(--electric));
  background-size: 180% 100%;
  box-shadow: 0 10px 30px -8px rgba(0, 229, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-primary:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(0, 229, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-ghost { color: #e6f1ff; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); }
.btn-ghost:hover { border-color: rgba(0, 229, 255, .6); color: #fff; background: rgba(0, 229, 255, .08); transform: translateY(-2px); }
.btn-wa { color: #fff; background: linear-gradient(110deg, #25D366, #128C7E); box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .55); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(37, 211, 102, .7); }

/* --------------------------------------------------------------------------
   Header & Navigasyon
   -------------------------------------------------------------------------- */
.site-header { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled {
  background: rgba(7, 11, 22, .78);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, .06);
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .8);
}
.nav-link { position: relative; color: #b6c2d9; font-weight: 500; padding: .5rem .25rem; transition: color .25s; }
.nav-link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyber), var(--electric)); transition: left .3s ease, right .3s ease;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { left: 0; right: 0; }

.mobile-menu { transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.mobile-menu.is-open { transform: none; opacity: 1; visibility: visible; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s, opacity .3s; }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Animasyonlar
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.reveal-left { transform: translateX(-40px); }
.js .reveal.reveal-right { transform: translateX(40px); }
.js .reveal.reveal-zoom { transform: scale(.92); }
.js .reveal.is-visible { opacity: 1; transform: none; }

.float { animation: float 6s ease-in-out infinite; }
.float-delay { animation-delay: -3s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.pulse-ring { position: relative; }
.pulse-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor;
  animation: pulse-ring 2.2s cubic-bezier(.2, .7, .2, 1) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

.spin-slow { animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.marquee { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.typing-caret { display: inline-block; width: 3px; height: 1em; margin-left: 4px; vertical-align: -0.12em; background: var(--cyber); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Süreç çizgisi */
.process-line { background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .55), rgba(30, 123, 255, .55), transparent); }

/* --------------------------------------------------------------------------
   Demo filtre sekmeleri & kartları
   -------------------------------------------------------------------------- */
.filter-btn { color: #b6c2d9; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: all .3s ease; }
.filter-btn:hover { color: #fff; border-color: rgba(0, 229, 255, .45); }
.filter-btn.is-active { color: #041018; background: linear-gradient(110deg, var(--cyber), var(--electric)); border-color: transparent; box-shadow: 0 10px 30px -10px rgba(0, 229, 255, .7); }
.demo-card { transition: opacity .45s ease, transform .45s ease; }
.demo-card.is-hidden { display: none; }
.demo-card.is-entering { opacity: 0; transform: translateY(18px) scale(.98); }

/* Tarayıcı penceresi maketi */
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mock-shine { position: relative; overflow: hidden; }
.mock-shine::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-20deg); transition: left .9s ease;
}
.group:hover .mock-shine::after { left: 130%; }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.field {
  width: 100%; border-radius: 14px; padding: .95rem 1.1rem; color: #fff;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field::placeholder { color: #64718c; }
.field:focus { outline: none; border-color: rgba(0, 229, 255, .7); background: rgba(0, 229, 255, .04); box-shadow: 0 0 0 4px rgba(0, 229, 255, .12); }
.field.is-invalid { border-color: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .12); }
select.field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
select.field option { background: #0d1426; color: #fff; }

/* Yüzen WhatsApp butonu */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 70; }
.wa-float .wa-tip { opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.wa-float:hover .wa-tip { opacity: 1; transform: none; }

/* Yukarı çık */
.to-top { position: fixed; right: 26px; bottom: 92px; z-index: 69; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s ease; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* SSS */
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq .faq-icon { transition: transform .3s ease; }
details.faq[open] .faq-icon { transform: rotate(45deg); }

/* Azaltılmış hareket tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Yatay kaydırmada çubuğu gizle */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Mobilde sağa sola kaymayı ve taşmayı engeller */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative !important;
}

/* Açılır mobil menünün arkasını tamamen kapatır */
#mobile-menu, 
.mobile-menu, 
[id*="mobile"], 
[class*="mobile-menu"], 
[class*="offcanvas"] {
  background-color: #050b14 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}