:root{
  --bg:#0b0f14; --card:#0f1520; --muted:#a8b2c1; --text:#eaf2ff;
  --pri1:#5aa9ff; --pri2:#2a7cff; --acc:#5ef6c4;
  --glass:rgba(255,255,255,.04); --br:18px; --shadow:0 10px 40px rgba(0,0,0,.35);
  --pad: clamp(16px,2vw,28px); --max:1200px;
}
*{box-sizing:border-box} html,body{height:100%}


html{ background:#0a0e16; scroll-behavior:smooth; }
body{
  margin:0; font-family:Inter,system-ui,'Poppins',sans-serif; color:var(--text);
  background:
    radial-gradient(1200px 800px at 70% -20%, rgba(42,124,255,.25), rgba(9,14,20,0)),
    radial-gradient(900px 600px at -10% 10%, rgba(94,246,196,.20), rgba(9,14,20,0)),
    linear-gradient(180deg,#0b0f14 0%, #0b0f14 35%, #0a0e16 70%, #0a0e16 100%);
  line-height:1.6; letter-spacing:.2px;
}

::selection{ background:rgba(42,124,255,.35); color:#fff; }

a{text-decoration:none; color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}


.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:12px; top:12px; z-index:999; padding:10px 14px; background:#fff; color:#000; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.15)}


.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.4) blur(8px);
  background:linear-gradient(0deg, rgba(11,15,20,.35), rgba(11,15,20,.35)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav.scrolled{ border-bottom-color:rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.25) }
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700}
.logo{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--pri2), var(--acc)); box-shadow:var(--shadow); display:grid; place-items:center}
.logo svg{width:22px; height:22px; fill:white; opacity:.95}
.nav-links{display:flex; gap:20px; align-items:center}
.nav-links a{padding:10px 14px; border-radius:12px; color:var(--muted); font-weight:600}
.nav-links a:hover{background:var(--glass); color:var(--text)}
.cta{background:linear-gradient(135deg, var(--pri2), var(--pri1)); color:white; padding:12px 18px; border-radius:14px; font-weight:700; box-shadow:var(--shadow)}

/* Burger */
.burger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); align-items:center; justify-content:center; gap:5px; cursor:pointer}
.burger span{display:block; width:20px; height:2px; background:#cfe1ff; border-radius:2px; transition:.2s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* HERO */
.hero{padding:clamp(48px,8vw,120px) 0; position:relative; overflow:clip;}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.eyebrow{display:inline-flex; gap:8px; padding:6px 10px; border-radius:999px; background:linear-gradient(180deg, rgba(94,246,196,.15), rgba(255,255,255,.04)); border:1px solid rgba(94,246,196,.35); color:#d8fff2; font-weight:700; font-size:12px; letter-spacing:.6px; text-transform:uppercase}
h1{font-family:Poppins,Inter,sans-serif; font-weight:800; line-height:1.05; font-size:clamp(32px,4.8vw,56px); margin:14px 0 12px}
.lead{color:var(--muted); font-size:clamp(16px,1.2vw,18px); max-width:58ch}
.hero-cta{margin-top:26px; display:flex; gap:14px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid rgba(255,255,255,.08); background:var(--glass); color:var(--text); border-radius:14px; font-weight:700}
.btn.pri{background:linear-gradient(135deg, var(--pri2), var(--pri1)); border-color:transparent}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.trust{margin-top:28px; color:var(--muted); font-size:14px}

/* mockup + alttan glow */
.mockup{background:linear-gradient(180deg,#0b111a,#0f1520); border:1px solid rgba(255,255,255,.06); border-radius:24px; box-shadow:var(--shadow); padding:18px; position:relative}
.mockup::after{content:""; position:absolute; left:10%; right:10%; bottom:-18px; height:36px; z-index:-1; background: radial-gradient(50% 100% at 50% 0%, rgba(42,124,255,.45), transparent 70%); filter: blur(18px);}
.screen{aspect-ratio:10/16; border-radius:18px; background:linear-gradient(180deg,#0e1420,#0a0f18); border:1px solid rgba(255,255,255,.06); overflow:hidden}
.screen .status{height:42px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00)); border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#cfe1ff; font-weight:700; letter-spacing:.8px}
.screen .content{padding:16px; display:grid; gap:12px}
.pill{padding:10px 12px; background:linear-gradient(180deg, rgba(42,124,255,.15), rgba(255,255,255,.04)); border:1px solid rgba(42,124,255,.35); color:#dbe9ff; border-radius:12px; font-weight:600; font-size:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px; display:grid; gap:8px}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600}

/* SECTIONS */
section{padding:clamp(56px,8vw,100px) 0; background:transparent;}
.section-title{font-family:Poppins; font-size:clamp(26px,3.2vw,38px); margin:0 0 12px}
.section-lead{color:var(--muted); max-width:70ch; margin-bottom:28px}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:22px; box-shadow:var(--shadow)}
.feat h3{margin:.2rem 0 .4rem; font-size:18px}
.feat p{color:var(--muted); font-size:14px; margin:0}
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.shot{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06); border-radius:18px; aspect-ratio:16/10;
  display:grid; place-items:center; color:var(--muted); cursor:pointer;
  font:inherit; padding:0; outline:none; box-shadow:none;
}
.shot:focus-visible{ outline:2px solid rgba(90,169,255,.6); outline-offset:3px; }

/* ✅ YENİ: NASIL ÇALIŞIR (Steps) */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.step{ padding:22px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden }
.step-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px }
.step h3{ margin:.1rem 0 .2rem; font-size:18px }
.step p{ color:var(--muted); margin:0 }
.step-num{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:800;
  background:linear-gradient(135deg, var(--pri2), var(--pri1)); color:#fff; box-shadow:0 8px 22px rgba(42,124,255,.35)
}
.step::after{
  content:""; position:absolute; inset:-40% -60%; transform:translateX(-120%) rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition: transform .6s ease;
}
.step:hover::after{ transform:translateX(120%) rotate(12deg) }

.steps-cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap }

@media (max-width:980px){
  .steps{ grid-template-columns:1fr; }
}

/* Pricing — UPDATED: matches index.html markup (.pricing-grid .pricing-card) */
.pricing-grid{
  display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:24px; align-items:stretch; margin-top:18px;
  place-content:center;
}
@media (max-width:900px){
  .pricing-grid{ grid-template-columns:1fr; }
}
.pricing-card{
  background:linear-gradient(180deg, rgba(15,21,32,.9), rgba(15,21,32,.72));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:22px; box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.pricing-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.12);
}
.pricing-card.recommended{ transform:translateY(-6px); border:1px solid rgba(94,246,196,.12); }
.pricing-card .card-header{ margin-bottom:12px }
.pricing-card h3{ margin:0 0 6px; font-size:18px }
.pricing-card .price{ display:flex; align-items:baseline; gap:8px; font-family:Poppins }
.price .currency{ font-size:1rem; color:var(--muted) }
.price .amount{ font-size:1.9rem; font-weight:800 }
.price .cents{ font-size:0.95rem; margin-left:2px }
.price .per{ margin-left:8px; color:var(--muted); font-size:0.95rem }
.pricing-card .features{ list-style:none; padding:0; margin:12px 0; display:block }
.pricing-card .features li{ padding:8px 0; border-bottom:1px solid rgba(255,255,255,.03); color:var(--muted) }
.pricing-card .card-footer{ margin-top:12px }
.pricing-card .card-footer .btn{ width:100%; justify-content:center }
.pricing-note{ margin-top:12px; color:var(--muted); font-size:14px; text-align:center }
.badge{ display:inline-flex; gap:8px; padding:6px 10px; border-radius:999px; background:linear-gradient(180deg, rgba(42,124,255,.12), rgba(255,255,255,.02)); border:1px solid rgba(42,124,255,.28); color:#dbe9ff; font-weight:700; font-size:12px; text-transform:uppercase }
.recommended .badge{ background:linear-gradient(90deg, rgba(94,246,196,.12), rgba(42,124,255,.08)); border-color:rgba(94,246,196,.22) }
.old-price{ margin-top:6px; color:#9ca3af; font-size:0.9rem }
.badge.reduced{ background:linear-gradient(180deg, rgba(94,246,196,.12), rgba(255,255,255,.02)); border:1px solid rgba(94,246,196,.28); color:#d8fff2 }
.save-badge{ margin:8px 0 0; padding:8px 10px; border-radius:12px; background:linear-gradient(180deg, rgba(94,246,196,.12), rgba(255,255,255,.02)); border:1px solid rgba(94,246,196,.35); color:#d8fff2; font-weight:700; font-size:12px }
.save-badge.pulse{ position:relative; animation: pulseGlow 1.8s ease-in-out infinite }

/* NEW: Yıllık tasarruf rozeti */
.plan-badge{
  position:absolute; top:12px; right:12px;
  font-size:12px; font-weight:800; letter-spacing:.2px;
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,#00E2A1,#3BA3FF);
  color:#0b0f14;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  pointer-events:none;
}
@media (max-width:560px){
  .plan-badge{ font-size:11px; padding:6px 9px; }
}

/* Billing toggle (premium görünüm) */
.billing-toggle{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; color:var(--muted)}
.switch{position:relative; display:inline-block; width:58px; height:30px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; cursor:pointer; inset:0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); transition:.25s; border-radius:999px; box-shadow: inset 0 4px 14px rgba(0,0,0,.25)}
.slider:before{content:""; position:absolute; height:22px; width:22px; left:4px; top:3px; background:linear-gradient(135deg,var(--pri2),var(--pri1)); border-radius:50%; transition:.25s; box-shadow:0 8px 22px rgba(42,124,255,.45)}
.switch input:checked + .slider{background:rgba(94,246,196,.14); border-color:rgba(94,246,196,.35)}
.switch input:checked + .slider:before{transform:translateX(28px)}
.lbl em{opacity:.8}

/* FAQ */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:18px}
details{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:14px 18px}
summary{cursor:pointer; font-weight:700; position:relative; padding-left:20px}
summary::before{ content:"+"; position:absolute; left:0; top:0; font-weight:900; color:var(--pri1); transition:transform .25s }
details[open]{box-shadow:var(--shadow)}
details[open] summary::before{ content:"–"; transform:rotate(180deg) }

/* FORM */
.input{width:100%; margin-top:6px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--text); outline:none}
.input:focus{border-color:rgba(94,246,196,.5); box-shadow:0 0 0 3px rgba(94,246,196,.12)}
.input.error{ border-color:#ff4d4f; box-shadow:0 0 0 3px rgba(255,77,79,.25) }
.error-text{ color:#ff4d4f; font-size:13px; margin-top:4px }

/* FOOTER */
footer{
  padding:40px 0 80px;
  color:var(--muted);
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(10,14,22,.55) 100%
  );
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:20px;
}

/* ALT NOT — GERÇEK ORTALAMA */
.footer-note{
  grid-column: 1 / -1;        /* tüm grid satırını kapla */
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.55);

  display: flex;             /* kritik nokta */
  justify-content: center;   /* yatay tam merkez */
  text-align: center;
}


/* WHATSAPP — premium glass + glow + gradient frame + pulse + tooltip */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:grid; place-items:center;
  width:64px; height:64px; border-radius:18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, 40% 160%;
  background-position:center, -150% 50%;

  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 30px rgba(37, 211, 102, .28);

  color:#fff; cursor:pointer;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background-position .6s ease;
  isolation:isolate;
  animation: waPulse 2.6s ease-in-out infinite;
}
.wa svg{ width:28px; height:28px; fill:#eafff3 }
.wa::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: conic-gradient(from 0deg, rgba(90,169,255,.55), rgba(42,124,255,.35), rgba(94,246,196,.55), rgba(90,169,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; filter: blur(6px);
  transition: opacity .25s ease;
  pointer-events:none;
}
.wa[data-tip]::after{
  content: attr(data-tip);
  position:absolute; right:74px; bottom:50%;
  transform: translateY(50%) translateX(6px);
  white-space:nowrap; padding:8px 12px; border-radius:10px;
  background: rgba(11,15,20,.92);
  border:1px solid rgba(255,255,255,.16);
  color:#eaf2ff; font-size:12.5px; font-weight:700; letter-spacing:.2px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.wa[data-tip]:hover::after{ opacity:1; transform: translateY(50%) translateX(0); }
.wa:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 22px 52px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 42px rgba(37, 211, 102, .40);
  background-position:center, 150% 50%;
}
.wa:hover::before{ opacity:.9 }
@keyframes waPulse{
  0%  { box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 26px rgba(37,211,102,.22); }
  50% { box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 38px rgba(37,211,102,.36); }
  100%{ box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 26px rgba(37,211,102,.22); }
}
@media (max-width:560px){ .wa{ width:58px; height:58px; right:18px; bottom:18px; border-radius:16px; } }
@media (prefers-reduced-motion: reduce){ .wa{ animation: none !important; transition:none !important; } }

/* RESPONSIVE */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .burger{display:flex}
  .nav-links{display:none}
}
@media (max-width:560px){
  .features{grid-template-columns:1fr}
}

/* İstatistik */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:24px 0 }
.stat{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; text-align:center; box-shadow:var(--shadow) }
.stat strong{ display:block; font-family:Poppins; font-size:clamp(22px,2.6vw,32px) }
.stat span{ color:var(--muted); font-size:14px }
@media(max-width:980px){ .stats{ grid-template-columns:1fr 1fr } }
@media(max-width:560px){ .stats{ grid-template-columns:1fr } }


.testi{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  perspective: 900px;

  height:140px;             
  min-height:120px;
  transition: height .35s ease;
}
.t{
  position:absolute; inset:0;
  margin:0; padding:26px;
  display:block;
  font-size:16px;
  opacity:0;
  transform: translateY(8px) rotateX(6deg) scale(.98);
  transition: opacity .5s ease, transform .5s ease;
  will-change: transform, opacity;
}
.t span{ display:block; margin-top:8px; color:var(--muted); font-size:14px; }
.t.active{  opacity:1; transform: translateY(0) rotateX(0) scale(1); }
.t.leaving{ opacity:0; transform: translateY(12px) rotateX(-6deg) scale(.98); }

/* Testimonials avatar + stars */
.t-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.t-avatar{
  width:40px; height:40px; border-radius:12px; flex:0 0 40px;
  display:grid; place-items:center; font-weight:800;
  color:#0b0f14; background: linear-gradient(135deg, var(--pri2), var(--acc));
  box-shadow: 0 6px 18px rgba(0,0,0,.25); overflow:hidden;
}
.t-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.t-meta strong{ display:block; line-height:1.1; }
.stars{ display:flex; gap:2px; font-size:14px; line-height:1; }
.stars .star{ opacity:.35; }
.stars .star.on{ opacity:1; color:#FFD166; text-shadow:0 0 8px rgba(255,209,102,.35); }

/* Partner logos (grid) */
.logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; opacity:.9 }
.logo-item{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px; text-align:center; color:var(--muted);
}
.logo-item img{ filter: grayscale(1) brightness(.95); opacity:.9; transition: filter .25s ease, opacity .25s ease; }
.logo-item:hover img{ filter: grayscale(0) brightness(1); opacity:1; }
@media(max-width:980px){ .logos{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:560px){ .logos{ grid-template-columns:repeat(2,1fr) } }

/* 2) Logolar carousel (marquee modu için ekstra sınıf) */
.logos.logos-marquee{
  display:block;
  overflow:hidden;
  padding:6px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logos-track{
  display:flex;
  gap:14px;
  align-items:center;
  animation: logos-marquee 24s linear infinite;
}
@keyframes logos-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
.logos .logo-item{ min-width:160px; flex:0 0 auto; }

/* CTA parıltı */
.btn.pri{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg, var(--pri2), var(--pri1));
}
.btn.pri::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
  background: conic-gradient(from 0deg, rgba(255,255,255,.4), transparent 30%, transparent 70%, rgba(255,255,255,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.25; filter: blur(6px);
  transition: opacity .3s ease;
}
.btn.pri:hover::before{ opacity:.55 }

/* yardımcılar / durumlar */
[hidden]{ display:none !important; }
.nav-links a.active{ color:var(--text); background:var(--glass); }

/* FAQ (+/– ikonları) */
summary{ position:relative; padding-left:20px; }
summary::before{ content:"+"; position:absolute; left:0; top:0; font-weight:900; color:var(--pri1); }

/* Form doğrulama */
.input.error{ border-color:#ff4d4f; box-shadow:0 0 0 3px rgba(255,77,79,.25); }
.error-text{ color:#ff4d4f; font-size:13px; margin-top:4px; }


#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  z-index:70; pointer-events:none;
  background: linear-gradient(90deg, var(--pri2), var(--pri1), var(--acc));
  box-shadow: 0 0 12px rgba(42,124,255,.65), 0 0 18px rgba(94,246,196,.45);
  transition: width .08s linear;
}

/* 2) Hafif noise/texture overlay */
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 3) Gradient border helper */
.gborder{ position:relative; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06); }
.gborder::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: conic-gradient(from 0deg, rgba(90,169,255,.45), rgba(42,124,255,.35), rgba(94,246,196,.35), rgba(90,169,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.35; filter:blur(6px); pointer-events:none;
}

/* 4) Hover/tilt */
.magnet{ transition: transform .12s ease, box-shadow .2s ease; will-change: transform; }
[data-tilt]{ transition: transform .2s ease, box-shadow .2s ease; will-change: transform; transform-style: preserve-3d; }
[data-tilt]:hover{ box-shadow: 0 14px 40px rgba(0,0,0,.38); }

/* 5) Özel imleç parıltısı */
#cursorGlow{
  position: fixed;
  left: 0; top: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .15s ease;
  background: radial-gradient(circle at 35% 35%,
              rgba(255,255,255,.85) 0%,
              rgba(90,169,255,.35) 40%,
              rgba(90,169,255,0) 70%);
  filter: blur(.8px);
  z-index: 80;
}
@media (hover:none){ #cursorGlow{ display:none; } }

/* 6) Reduce-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  #scrollProgress{ transition:none }
  [data-tilt], .magnet{ transform:none !important; }
}

/* küçük iyileştirme */
.gborder .screen{ border:1px solid rgba(255,255,255,.08); }

/* ====== CANLI ARKA PLAN & AYRAÇLAR ====== */
#bgParallax{
  position:fixed; inset:-20% -20% -20% -20%; z-index:-1;
  background:
    radial-gradient(35rem 30rem at 20% 10%, rgba(94,246,196,.08), transparent 60%),
    radial-gradient(40rem 35rem at 80% 20%, rgba(42,124,255,.10), transparent 70%),
    radial-gradient(45rem 40rem at 50% 110%, rgba(42,124,255,.06), transparent 70%);
  filter:saturate(1.2) blur(.2px);
  transform: translate3d(0,0,0);
  transition: transform .1s linear;
}

/* Bölümler arası yumuşak ışık */
section + section{ position:relative; }
section + section::before{
  content:""; position:absolute; left:0; right:0; top:-56px; height:110px;
  background: radial-gradient(50% 60% at 50% 0, rgba(255,255,255,.06), rgba(255,255,255,0));
  opacity:.22; pointer-events:none;
}

/* Başlık altı gradient çizgi */
.section-title{ position:relative; display:inline-block; }
.section-title::after{
  content:""; display:block; height:3px; margin-top:10px;
  background: linear-gradient(90deg,var(--pri2),var(--pri1),var(--acc));
  border-radius:999px; opacity:.7;
}

/* Showcase “sheen” */
.shot{ position:relative; overflow:hidden; }
.shot::after{
  content:""; position:absolute; inset:-40% -60%; transform:translateX(-120%) rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition: transform .6s ease;
  animation: sheen 5s linear infinite;
}
@keyframes sheen{
  0%{ transform:translateX(-120%) rotate(12deg); }
  100%{ transform:translateX(120%) rotate(12deg); }
}

/* Kart mikro-animasyonları */
.feat,.price-card,.shot,.step{
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.feat:hover,.price-card:hover,.shot:hover,.step:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.14);
}

/* Hero spotlight */
.hero-spotlight{
  position:absolute; inset:-20% -10% auto -10%; height:80%;
  background:
    radial-gradient(600px 300px at 70% 10%, rgba(42,124,255,.22), transparent 70%),
    radial-gradient(420px 260px at 20% 0%, rgba(94,246,196,.18), transparent 70%);
  filter: blur(.5px);
  z-index:0;
}
.hero .container{ position:relative; z-index:1; }

/* Save badge (fiyat) */
.save-badge{
  margin:8px 0 0; padding:8px 10px; border-radius:12px;
  background:linear-gradient(180deg, rgba(94,246,196,.12), rgba(255,255,255,.02));
  border:1px solid rgba(94,246,196,.35);
  color:#d8fff2; font-weight:700; font-size:12px;
}

/* Lightbox */
#lightbox{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  background:rgba(5,8,12,.65);
  backdrop-filter: blur(6px);
}
#lightbox[hidden]{ display:none !important; } /* (UI bunu zaten ekliyor; güvenli) */
#lightbox img{
  max-width:min(92vw,1200px);
  max-height:min(82vh,900px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute; right:18px; top:14px;
  width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-size:24px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
}
#lightbox-caption{
  margin-top:10px; color:#cfe1ff; text-align:center; font-size:14px;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

/* ok butonları */
.lb-nav{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between;
}
.lb-btn{
  pointer-events:auto; width:48px; height:48px; margin:0 12px;
  border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-size:20px; display:grid; place-items:center; cursor:pointer;
}
.lb-btn:focus-visible{ outline:2px solid rgba(90,169,255,.6); outline-offset:2px; }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:auto 0 0 0; background:rgba(11,15,20,.92); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.08); z-index:55; display:grid; gap:10px; padding:16px; box-shadow:0 -16px 32px rgba(0,0,0,.3)
}
.mobile-menu a{ padding:12px 14px; border-radius:12px; color:#eaf2ff }
.mobile-menu a:hover{ background:rgba(255,255,255,.06) }


.hero { position:relative; }
.hero-orbs{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  filter:saturate(1.2);
}
.orb{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(94,246,196,.35), rgba(42,124,255,.0) 60%);
  mix-blend-mode: screen; filter: blur(10px); opacity:.55; 
  animation: orbFloat 14s ease-in-out infinite;
}
.orb-a{ width:32vmin; height:32vmin; left: -6vmin; top: -4vmin; animation-duration: 16s; }
.orb-b{ width:26vmin; height:26vmin; right:-8vmin; top:  6vmin; animation-duration: 18s; }
.orb-c{ width:22vmin; height:22vmin; left: 20%; bottom:-6vmin; animation-duration: 20s; }
@keyframes orbFloat{
  0%  { transform: translateY(0) translateX(0) scale(1);   opacity:.55; }
  50% { transform: translateY(12px) translateX(6px) scale(1.04); opacity:.75; }
  100%{ transform: translateY(0) translateX(0) scale(1);   opacity:.55; }
}
@media (prefers-reduced-motion: reduce){ .orb{ animation: none; } }

/* Tasarruf rozeti pulsesi (yıllık modda) */
.save-badge.pulse{ position:relative; animation: pulseGlow 1.8s ease-in-out infinite; }
@keyframes pulseGlow{
  0%  { box-shadow: 0 0 0 0 rgba(94,246,196,.35), inset 0 0 0 0 rgba(94,246,196,.15); }
  70% { box-shadow: 0 0 0 12px rgba(94,246,196,0), inset 0 0 0 2px rgba(94,246,196,.18); }
  100%{ box-shadow: 0 0 0 0 rgba(94,246,196,0), inset 0 0 0 0 rgba(94,246,196,0); }
}
@media (prefers-reduced-motion: reduce){ .save-badge.pulse{ animation:none; } }

/* Pricing hover sheen */
.price-card{ overflow:hidden; }
.price-card::after{
  content:""; position:absolute; inset:-40% -80%; transform:translateX(-120%) rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition: transform .6s ease;
}
.price-card:hover::after{ transform:translateX(120%) rotate(12deg); }

/* Back-to-top (buton JS ile ekleniyorsa görünüm referansı) */
.to-top{
  position:fixed; right:20px; bottom:94px; z-index:60;
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:#eaf2ff; font-weight:800; font-size:18px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
}
.to-top.show{ opacity:1; transform:translateY(0); }
.to-top:focus-visible{ outline:2px solid rgba(90,169,255,.6); outline-offset:2px; }
@media (max-width:560px){ .to-top{ right:18px; bottom:calc(84px + env(safe-area-inset-bottom)); } }


.feat{
  position:relative;
  transform-origin: 50% 100%;
}
.feat::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background: radial-gradient(180px 140px at 50% 110%, rgba(90,169,255,.15), transparent 70%);
  opacity:0; transition:.25s ease; pointer-events:none;
}
.feat:hover{
  animation: microBounce .4s ease-out;
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.14);
}
.feat:hover::after{ opacity:1; }
.feat .icon{ filter: drop-shadow(0 6px 16px rgba(90,169,255,.45)); transition: filter .25s ease; }
.feat:hover .icon{ filter: drop-shadow(0 10px 24px rgba(90,169,255,.6)); }
@keyframes microBounce{
  0% { transform: translateY(0) scale(1); }
  30%{ transform: translateY(-4px) scale(1.02); }
  60%{ transform: translateY(1px) scale(0.998); }
  100%{ transform: translateY(0) scale(1); }
}

/* Pricing popular glow (güçlendirme) */
.price-card[data-popular="true"]{
  box-shadow: 0 18px 60px rgba(42,124,255,.28), inset 0 0 0 1px rgba(94,246,196,.18);
}

/* Section başlık fade/slide (JS 'in' sınıfını atıyor) */
.section-title, .section-lead{
  opacity:0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.section-title.in, .section-lead.in{ opacity:1; transform: translateY(0); }

/* Parallax divider */
.parallax-divider{
  height:90px; pointer-events:none; margin-top:-36px; margin-bottom:-36px;
  background:
    radial-gradient(50% 60% at 50% 0, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    radial-gradient(40% 50% at 30% 30%, rgba(42,124,255,.12), rgba(42,124,255,0) 70%),
    radial-gradient(40% 50% at 70% 30%, rgba(94,246,196,.10), rgba(94,246,196,0) 70%);
  filter: saturate(1.1);
  transition: transform .12s linear, opacity .2s ease;
}

/* CTA Ripple (tüm .btn/.cta) */
.btn, .cta { position: relative; overflow: hidden; }
.ripple{
  position:absolute; border-radius:50%;
  transform: scale(0); opacity:.45;
  background: radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%);
  animation: ripple 700ms ease-out forwards;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes ripple{ to{ transform: scale(3); opacity:0; } }

/* --- Pricing symmetric premium layout --- */
.pricing-symmetric{
  grid-template-columns: repeat(2, minmax(320px,1fr));
  align-items: stretch;
}
@media (max-width: 900px){
  .pricing-symmetric{ grid-template-columns: 1fr; }
}

.pricing-card{
  display:flex; flex-direction:column; gap:14px;
  padding:24px; background:linear-gradient(180deg, rgba(15,21,32,.92), rgba(15,21,32,.75));
}

.pricing-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
}
.pricing-head .plan-title{ margin:0; font-size:18px; font-weight:800; }
.pricing-head .head-spacer{ width:86px; height:28px; } /* yıllık rozete simetri */

.plan-sub{ color:var(--muted); font-size:14px; margin:0; }

/* fiyat satırı: tüm kartlarda aynı yükseklik ve hiza */
.price-row{
  display:flex; align-items:flex-end; gap:8px; padding:8px 0 2px;
  font-family:Poppins, Inter, sans-serif; border-bottom:1px solid rgba(255,255,255,.06);
}
.price-row .currency{ font-size:18px; opacity:.85; transform:translateY(-3px); color:var(--text); }
.price-row .amount{ font-size:42px; line-height:1; font-weight:900; letter-spacing:.5px; }
.price-row .cents{ font-size:18px; transform:translateY(-3px); opacity:.9; }
.price-row .per{ font-size:15px; color:var(--muted); margin-left:4px; transform:translateY(-2px); }

/* özellik listesi iki kartta eşit boşlukla */
.pricing-card .features{ margin:6px 0 0; }
.pricing-card .features li{ padding:10px 0; }

/* CTA alanını dibe itip butonları eşitle */
.pricing-actions{ margin-top:auto; }
.w-full{ width:100%; justify-content:center; }

/* mini pill (2 ay ücretsiz) */
.pill-mini{
  margin-left:10px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  font-weight:800; font-size:12px;
}

/* Yıllık tasarruf rozeti – mevcut .plan-badge ile aynı, biraz rafine */
.plan-badge{
  position:relative; justify-self:end;
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:800;
  background:linear-gradient(90deg,#19e6b1,#2a7cff);
  color:#0b0f14; box-shadow:0 8px 22px rgba(0,0,0,.28);
}

/* Recommended kartın premium vurgusu */
.pricing-card.recommended{
  border:1px solid rgba(94,246,196,.20);
  box-shadow: 0 18px 60px rgba(42,124,255,.16), inset 0 0 0 1px rgba(94,246,196,.12);
}

/* Hover tutarlılığı */
.pricing-card:hover{ transform:translateY(-3px); }

/* --- PRICING: tam simetri + sabit rozet ve butonlar --- */

/* Başlık şeridi: flex + rozet sağa sabit */
.pricing-head{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  min-height:48px; /* iki kartta aynı yükseklik */
}
.pricing-head .plan-title{ margin:0; font-size:18px; font-weight:800; }
.plan-badge{
  position:absolute; top:50%; right:12px; transform:translateY(-50%);
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:800;
  background:linear-gradient(90deg,#19e6b1,#2a7cff); color:#0b0f14;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}

/* Fiyat satırı hizası (her iki kartta aynı) */
.price-row{
  display:flex; align-items:flex-end; gap:8px; padding:10px 0 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.price-row .currency{ font-size:18px; transform:translateY(-3px); opacity:.9; }
.price-row .amount{ font-size:42px; line-height:1; font-weight:900; letter-spacing:.5px; }
.price-row .cents{ font-size:18px; transform:translateY(-3px); opacity:.9; }
.price-row .per{ font-size:15px; color:var(--muted); transform:translateY(-2px); }

/* CTA’ları eşitle: aynı renk, aynı boy, aynı yer */
.pricing-actions{ margin-top:auto; }
.pricing-actions .btn{ 
  width:100%; justify-content:center; min-height:48px; 
  border-radius:14px; font-weight:800;
}
.pill-mini{ 
  margin-left:10px; padding:6px 10px; line-height:1; 
  border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
}

/* Kartların dış görünümü aynı, yıllık “recommended” hafif vurgulu */
.pricing-card{
  display:flex; flex-direction:column; gap:14px; padding:24px;
  background:linear-gradient(180deg, rgba(15,21,32,.92), rgba(15,21,32,.75));
}
.pricing-card.recommended{
  border:1px solid rgba(94,246,196,.20);
  box-shadow: 0 18px 60px rgba(42,124,255,.16), inset 0 0 0 1px rgba(94,246,196,.12);
}

/* Grid simetrisi */
.pricing-symmetric{
  display:grid; grid-template-columns: repeat(2, minmax(320px,1fr));
  gap:18px; align-items:stretch;
}
@media (max-width: 900px){ .pricing-symmetric{ grid-template-columns:1fr; } }

#fiyat .pricing-card .pricing-head{
  padding-right:110px; /* rozet alanı; monthly’de de simetri sağlar */
}

#fiyat .pricing-card .plan-badge{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:linear-gradient(90deg,#19e6b1,#2a7cff);
  color:#0b0f14;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  pointer-events:none;
  z-index:1;
}
@media (max-width:560px){
  #fiyat .pricing-card .plan-badge{ font-size:11px; padding:6px 10px; right:10px; }
  #fiyat .pricing-card .pricing-head{ padding-right:96px; }
}

#fiyat .pricing-card .price-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 0 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:Poppins, Inter, sans-serif;
}
#fiyat .price-row .currency{ font-size:18px; transform:translateY(-3px); opacity:.9; }
#fiyat .price-row .amount{ font-size:42px; line-height:1; font-weight:900; letter-spacing:.5px; }
#fiyat .price-row .cents{ font-size:18px; transform:translateY(-3px); opacity:.9; }
#fiyat .price-row .per{ font-size:15px; color:var(--muted); margin-left:2px; transform:translateY(-2px); }

#fiyat .pricing-actions{ margin-top:auto; }
#fiyat .pricing-actions .btn{
  width:100%;
  justify-content:center;
  min-height:48px;
  border-radius:14px;
  font-weight:800;
  background:linear-gradient(135deg, var(--pri2), var(--pri1)) !important;
  border-color:transparent !important;
  color:#fff !important;
}
#fiyat .pricing-actions .btn .pill-mini{
  margin-left:10px;
  padding:6px 10px;
  line-height:1;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
  font-size:12px;
}

#fiyat .pricing-grid,
#fiyat .pricing-symmetric{
  display:grid;
  grid-template-columns:repeat(2, minmax(320px,1fr));
  gap:18px;
  align-items:stretch;
}
@media (max-width:900px){
  #fiyat .pricing-grid,
  #fiyat .pricing-symmetric{ grid-template-columns:1fr; }
}

#fiyat .pricing-card.recommended{
  border:1px solid rgba(94,246,196,.20);
  box-shadow: 0 18px 60px rgba(42,124,255,.16), inset 0 0 0 1px rgba(94,246,196,.12);
}

#fiyat .pricing-card .features{ margin:6px 0 0; }
#fiyat .pricing-card .features li{ padding:10px 0; border-bottom:1px solid rgba(255,255,255,.03); color:var(--muted); }


#demoForm > div{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}
#demoForm label{ display:block; width:100%; }
#demoForm .input, #demoForm textarea{ width:100%; }
#demoForm .confetti-btn{ width:100%; justify-content:center; }


#fiyat .pricing-card .pricing-head{ min-height:48px; }


#fiyat .pricing-card:hover{
  transform:translateY(-3px);
  box-shadow: 0 16px 42px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.12);
}


:where(.gborder,.card,.mockup,.form-card,.panel):has(#demoForm){
  max-width: 780px;
  margin-left: 0 !important;
  margin-right: auto !important;
}
:where(section,.container,.form-wrap):has(#demoForm){
  display: block !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  text-align: left !important;
}
#demoForm{ width: 100%; margin: 0 !important; }
#demoForm label{ text-align: left; }
#demoForm .input, #demoForm textarea{ width: 100%; }
@media (max-width: 560px){
  :where(.gborder,.card,.mockup,.form-card,.panel):has(#demoForm){
    max-width: none;
  }
}


#ekranlar .showcase{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

#ekranlar .shot{
  position:relative;
  padding:0 !important;
  background: radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.06), rgba(255,255,255,.02) 60%), var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  transition: transform .25s ease, box-shadow .25s ease;
  aspect-ratio: 9 / 16;   
  max-width: 280px;       
  margin-inline:auto;
}

#ekranlar .shot:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}


#ekranlar .shot img{
  width:100%;
  height:100%;
  object-fit: contain;     
  display:block;
  background: rgba(255,255,255,.06);
  padding:10px;            
  border-radius:14px;
}


#ekranlar .shot span{
  position:absolute;
  left:10px; bottom:10px;
  padding:6px 10px;
  border-radius:10px;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:14px;
  font-weight:600;
  pointer-events:none;
}




:where(a, button, [role="button"], input, textarea, select, summary, .btn, .cta, .burger):focus-visible{
  outline:3px solid rgba(90,169,255,.9);
  outline-offset:3px;
  box-shadow: 0 0 0 3px rgba(90,169,255,.25);
}
:where(input, textarea, select):focus-visible{
  border-color:rgba(94,246,196,.55);
  box-shadow:0 0 0 3px rgba(94,246,196,.16);
}
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

button .muted, .btn .muted, .cta .muted{ color:#d3def0; }

.gborder a{ color:#eaf2ff; }

@media (prefers-contrast: more){
  :where(a, button, .btn, .cta):focus-visible{ outline-width:4px; }
}


@media print {
 
  html, body { background: #fff !important; color: #000 !important; }
  body { box-shadow: none !important; text-shadow: none !important; }

  
  nav, footer, .hero, .wa, #scrollProgress, #cursorGlow, #bgParallax,
  .mobile-menu, .noise { display: none !important; }

  
  .gborder, .card, .feat, .pricing-card, .shot, .step, .testi,
  .mockup, .screen, .logos .logo-item {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    color: #000 !important;
  }

  
  .container { max-width: none !important; padding: 0 !important; }

  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 12px;
  }

  
  img, svg { max-width: 100% !important; height: auto !important; }

  
  .btn, .cta {
    background: #fff !important; color: #000 !important;
    border: 1px solid #000 !important; box-shadow: none !important;
  }

  
  section { padding: 16px 0 !important; }

  
  * { animation: none !important; transition: none !important; filter: none !important; }
}


.wa{ right:20px; bottom:20px; z-index:60; }
.to-top{ right:20px; bottom:94px; z-index:60; }
@media (max-width:560px){
  .wa{ right:18px; bottom:18px; }
  .to-top{ right:18px; bottom:calc(84px + env(safe-area-inset-bottom)); }
}


body:has(#tawkchat-minified, .intercom-lightweight-app, .grecaptcha-badge) .to-top{
  bottom: 120px;
}