:root{
  --bg1:#0B1D39; --bg2:#051427; --ink:#F1F2F6; --muted:#C9CEDA;
  --line:#2a4266; --accent:#54a6ff; --accent2:#9b7bff; --alert:#ff3d5a;
  --glass:#10233f88;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:16px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:#0B1D39; overflow-x:hidden; position:relative;
  padding-top:96px; /* büyüyen header */
}
/* Tek arka plan (grid + glow + noise) */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.06" viewBox="0 0 100 100"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2" seed="3"/></filter><rect width="100" height="100" filter="url(%23n)"/></svg>'),
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(1200px 600px at 70% -10%, #1b3763 0%, transparent 60%),
    radial-gradient(900px 520px at -10% 30%, #133055 0%, transparent 55%),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  background-size:auto,48px 48px,48px 48px,auto,auto,auto;
  background-repeat:repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
  animation:gridShift 24s linear infinite;
}
@keyframes gridShift{to{background-position:0 0,480px 0,0 480px,center,center,center}}
body::after{
  content:""; position:fixed; inset:-15vh; z-index:-1; pointer-events:none; opacity:.8;
  background:conic-gradient(from 0deg at 50% 50%, #0f2a4b, #0a1c36, #153a66, #0f2a4b);
  mask-image:radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 75%);
  animation:spin 42s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

/* SABİT HEADER — büyütülmüş logo ve wordmark ile */
.site-header{
  position:fixed; inset:0 0 auto 0; height:96px; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; background:transparent; border:0; box-shadow:none;
  transform:none !important; will-change:auto;
}
.brand{display:flex; align-items:center; gap:22px}
.logo{width:92px; height:auto; display:block} /* 64px → 92px */
.wordmark{
  font-size:42px; /* 34px → 42px */
  font-weight:900; letter-spacing:.2px; line-height:1;
  background:linear-gradient(90deg,#EAF0FF,#C9D8FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 36px rgba(84,166,255,.18); white-space:nowrap;
}
.wordmark b{
  background:linear-gradient(90deg,#7BB6FF,#9B7BFF);
  -webkit-background-clip:text; background-clip:text; color:transparent
}

/* Logo mikro animasyonları */
.logo-scan{transform-origin:32px 32px; animation:logoSpin 5s linear infinite}
@keyframes logoSpin{to{transform:rotate(360deg)}}
.logo-ring{stroke:#9EC0F0; stroke-width:2.4; fill:none; opacity:.42;
  stroke-dasharray:180; stroke-dashoffset:180; animation:ringDraw 1.2s ease-out forwards}
.logo-ring.r2{animation-delay:.12s}
@keyframes ringDraw{to{stroke-dashoffset:0}}
.logo-alert{ transform-box: fill-box; transform-origin: center; }

/* CTA ve buton — tek tip (link & button) */
.cta{
  position:relative; display:inline-flex; gap:12px; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:14px; font-weight:900; line-height:1;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff; text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 12px 28px rgba(84,166,255,.3); transition:transform .18s, box-shadow .18s;
}
.cta::after{
  content:""; position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);
  transform:translateX(-100%); animation:shimmer 3s ease-in-out infinite;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(84,166,255,.38)}
@keyframes shimmer{50%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* Kapsayıcı ve bölümler */
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
section{padding:42px 0}
.grid{display:grid; gap:22px}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Hero — logoya yakın ve kompakt + CTA altı boşluk */
.hero{
  display:grid; grid-template-columns:1.02fr 1fr;
  gap:clamp(18px,2.6vw,28px); align-items:center; margin-top:-6px
}
.title{font-size:56px; line-height:1.06; margin:6px 0 10px; font-weight:900}
.subtitle{color:var(--muted); font-size:19px; margin:0 0 22px}
.hero-cta{ margin-bottom: 14px; } /* CTA ile stats arası boşluk */
.ribbon{
  display:inline-flex; gap:10px; align-items:center; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); padding:8px 12px; border-radius:999px; font-size:13px
}
.dot{width:10px; height:10px; border-radius:999px; background:#69ff9b; box-shadow:0 0 18px #69ff9b; animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.2); box-shadow:0 0 26px #69ff9b}}

/* Kart ve Radar */
.card{position:relative; background:linear-gradient(180deg,#10233f,#0d1f39);
  border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:22px; overflow:hidden}
.radar{position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden;
  background:radial-gradient(380px 380px at 50% 50%, #12365f 0%, #0c1e37 60%);
  border:1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05)}
.rGlow{position:absolute; inset:-30%; background:radial-gradient(closest-side, rgba(84,166,255,.28), transparent 70%);
  filter:blur(30px); opacity:.6; animation:rg 6s ease-in-out infinite}
@keyframes rg{50%{opacity:.25}}
.rings:before,.rings:after{content:""; position:absolute; border:1px solid #345a8b; border-radius:50%}
.rings:before{width:74%;height:74%}
.rings:after{width:48%;height:48%}
.beam{position:absolute; inset:-10% 50% -10% -10%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.13), rgba(255,255,255,0) 40%),
             conic-gradient(from 0deg, rgba(84,166,255,.22), rgba(84,166,255,0) 40%);
  filter:blur(2px); transform-origin:center; animation:sweep 3.2s linear infinite}
@keyframes sweep{to{transform:rotate(1turn)}}

/* Mavi pingler */
.p{position:absolute;width:10px;height:10px;border-radius:999px;background:#eaf3ff;
   box-shadow:0 0 0 0 rgba(234,243,255,.6); animation:pulseDot 2.2s ease-out infinite}
.p.a{top:58%;left:68%}.p.b{top:28%;left:36%;animation-delay:.7s}.p.c{top:66%;left:32%;animation-delay:1.2s}
@keyframes pulseDot{to{box-shadow:0 0 0 28px rgba(234,243,255,0)}}

/* Kırmızı tespitler */
.alertPing{position:absolute;width:12px;height:12px;border-radius:999px;background:var(--alert);
  box-shadow:0 0 0 0 rgba(255,61,90,.8); animation:alertPulse 1.6s ease-out infinite; transition:top .8s,left .8s}
@keyframes alertPulse{0%{transform:scale(1); box-shadow:0 0 0 0 rgba(255,61,90,.7)}70%{transform:scale(1.2); box-shadow:0 0 0 22px rgba(255,61,90,0)}100%{transform:scale(1)}}
.alertBeam{position:absolute; inset:-12% 50% -12% -12%;
  background:conic-gradient(from 0deg, rgba(255,61,90,.18), rgba(255,61,90,0) 35%);
  filter:blur(2px); transform-origin:center; animation:alertSweep 2.8s linear infinite}
@keyframes alertSweep{to{transform:rotate(1turn)}}

/* Wave */
.wave{position:relative; height:120px; border-radius:14px; overflow:hidden; margin-top:18px;
  background:linear-gradient(180deg,#0e2241,#0c1d36); border:1px solid rgba(255,255,255,.08)}
.wave svg{position:absolute; inset:0}
.path{stroke:url(#grad); stroke-width:2; fill:none; stroke-dasharray:4 6; animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-240}}
.badge{position:absolute; right:10px; top:10px; font-size:12px; padding:6px 10px; border-radius:999px;
  background:#133055; border:1px solid rgba(255,255,255,.12); color:var(--muted)}

/* Kartlar / metinler */
.stat{background:var(--glass); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:16px 18px}
.stat b{font-size:26px; display:block}
.stat span{color:var(--muted); font-size:13px}
.feature{padding:24px; border-radius:18px; background:linear-gradient(180deg,#132946,#0f223e);
  border:1px solid rgba(255,255,255,.08); transition:transform .2s, box-shadow .2s}
.feature:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.35)}
.icon{font-size:32px; margin-bottom:10px}

/* (1) İLETİŞİM kicker — daha güçlü */
.kicker{
  display:inline-block;
  font-weight:900; font-size:13px; letter-spacing:.22em;
  color:#EAF0FF; opacity:.95;
  text-transform:uppercase;
  padding:6px 10px 6px 10px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  position:relative;
}
.kicker::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:3px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:.85;
}

/* Form */
.lead{margin-top:10px;max-width:820px}
.lead .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.lead input,.lead textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:var(--ink); font:inherit; outline:none
}
.lead input:focus,.lead textarea:focus{border-color:rgba(84,166,255,.45); box-shadow:0 0 0 3px rgba(84,166,255,.15)}

.form-status{ margin-top:12px; font-size:14px; color:var(--muted); }
.form-status.success{ color:#9CFFCF; }
.form-status.error{ color:#ffb3c0; }

#leadSubmit.is-loading{ pointer-events:none; opacity:.85; }
#leadSubmit.is-loading::after{
  content:""; width:1em; height:1em; margin-left:10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6); border-top-color:transparent;
  display:inline-block; animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

.hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

.site-footer{padding:32px 24px 44px; color:var(--muted); text-align:center; font-size:14px; border-top:1px solid rgba(255,255,255,.10)}

/* Erişilebilirlik */
.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}

@media(max-width:980px){
  .site-header{height:84px; padding:0 18px}
  body{padding-top:88px}
  .brand{gap:14px}
  .logo{width:72px}
  .wordmark{font-size:32px}
  .hero{grid-template-columns:1fr}
  .title{font-size:42px}
  .lead .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  body::after,.path,.beam,.p,.rGlow,.alertBeam,.alertPing,.logo-scan,.logo-ring{animation:none}
}

/* ---- Pricing Cards ---- */
.br-pricing h2 {
  margin: 8px 0 20px;
  font-size: 32px;
  font-weight: 900;
}

.br-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 18px;
}

.br-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  background: linear-gradient(180deg,#112743,#0d1f39);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.br-plan:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

.br-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.br-badge {
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  color: #dce6ff;
  background: rgba(255,255,255,.05);
}

.br-badge--starter { border-color:#335a87; }
.br-badge--pro { border-color:#3e69c2; }
.br-badge--ent { border-color:#6a59d1; }

.br-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.br-price-now {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
}
.br-price-old {
  color: #C9CEDA;
}
.br-off {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: #C9CEDA;
}

.br-setup {
  color: #C9CEDA;
  font-size: 14px;
  margin: 6px 0 14px;
}

.br-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.br-list li {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
}

.br-extra {
  color: #C9CEDA;
  font-size: 14px;
  margin: 10px 0;
}

.br-cta {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.logo {
  width: 64px;
  height: auto;
  display: block;
}
.wordmark {
  font-size: 32px;
  font-weight: 900;
  margin-left: 12px;
  background: linear-gradient(90deg,#EAF0FF,#C9D8FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark b {
  background: linear-gradient(90deg,#7BB6FF,#9B7BFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Scroll davranışı */
.site-header.shrink .wordmark {
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
}
.site-header .wordmark {
  transition: opacity .3s ease, transform .3s ease;
}

/* === Mobile header & hero fixes === */

/* iOS çentik için güvenli boşluk */
:root { --safe-top: env(safe-area-inset-top, 0px); }

/* Header içindeki elemanların taşmaması */
.site-header .brand{ gap:14px; min-width:0; flex:1; }
.site-header .cta{ flex:0 0 auto; }

/* Çok dar ekranlarda wordmark’ı kırp */
.wordmark{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 600px ve altı: boyutları küçült, güvenli üst boşluk ver */
@media (max-width:600px){
  .site-header{
    height:72px;
    padding: calc(6px + var(--safe-top)) 12px 0 12px; /* üstte safe-area */
  }
  .logo{ width:56px; }
  .wordmark{ font-size:28px; max-width:60vw; } /* yazı CTA’ya çarpmasın */
  .cta{ padding:10px 16px; border-radius:12px; }

  /* hero başlığı header’a yapışmasın */
  body{ padding-top: calc(72px + var(--safe-top)); }
  .hero{ margin-top: 6px; }
  .wrap{ padding: 0 16px; }
}

/* 360px ve altı: sadece logo kalsın (istiyorsan) */
@media (max-width:360px){
  .wordmark{ display:none; }
}

/* --- Mobilde scroll ile header'ı gizle --- */
@media (max-width: 768px) {
  .site-header{
    transition: transform .25s ease;
    will-change: transform;
  }
  .site-header.mobile-hide{
    transform: translateY(-120%);
  }
}