/* Yakışır • Deluxe UI */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Manrope:wght@500;700;800&display=swap');
:root{
  --bg1:#0a0f1f; --bg2:#0e1426;
  --ink:#eaf4ff; --muted:#b8c8dc;
  --line:rgba(255,255,255,.16); --card:rgba(255,255,255,.06);
  --g1:#00e5ff; --g2:#7c3aed; --g3:#ffb020; --g4:#16f2b3;
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1100px 560px at 15% -10%, rgba(0,229,255,.20), transparent 40%),
    radial-gradient(1100px 560px at 85% 110%, rgba(124,58,237,.22), transparent 40%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family: "Plus Jakarta Sans", Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  letter-spacing:.2px;
  overflow-x:hidden;
}
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35}
.particles span{position:absolute;width:8px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--g1),var(--g2));filter:blur(1px);animation:float 18s linear infinite}
.particles span:nth-child(odd){background:linear-gradient(90deg,var(--g3),var(--g4))}
@keyframes float{0%{transform:translateY(100vh) translateX(0)}100%{transform:translateY(-10vh) translateX(40px)}}
.progress{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));width:0;z-index:60}
.nav{position:sticky;top:0;z-index:55;backdrop-filter:saturate(140%) blur(10px); background:rgba(15,20,35,.6); border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand .name{font-family:"Manrope", system-ui, sans-serif;font-weight:800;letter-spacing:-.02em;font-size:24px;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .sub{font-size:12px;color:var(--muted);margin-left:8px}
.nav a{color:#e6f6ff;text-decoration:none;margin-left:18px;position:relative;font-weight:600;opacity:.92}
.nav a::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:linear-gradient(90deg,var(--g1),var(--g2));transition:width .25s ease}
.nav a:hover::after{width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.section{padding:56px 0}
.section-title{margin:0 0 14px 0;font-size:clamp(26px,3.2vw,36px);font-weight:900;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#cde9ff,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtle{color:var(--muted)}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;position:relative;overflow:hidden;
  background:linear-gradient(90deg, var(--g1), var(--g2)); box-shadow:0 14px 34px rgba(0,0,0,.30); transition:transform .14s ease, box-shadow .28s ease}
.btn.alt{background:linear-gradient(90deg, var(--g3), var(--g2))}
.btn.alt2{background:linear-gradient(90deg, var(--g4), var(--g1))}
.btn:hover{transform:translateY(-1px) scale(1.02); box-shadow:0 20px 60px rgba(0,0,0,.40)}
.btn::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transform:translateX(-120%); transition:transform .6s ease}
.btn:hover::after{transform:translateX(120%)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:36px 0}
@media (max-width:1024px){.hero{grid-template-columns:1fr;gap:18px}}
.hero-title{font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 8s linear infinite}
.hero-sub{color:var(--muted);font-weight:600}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
@keyframes shine{to{background-position:200% 0}}
.slider{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 36px rgba(0,0,0,.32);background:#000}
.slider-track{display:flex;transition:transform .6s cubic-bezier(.22,.8,.26,1)}
.slide{min-width:100%;height:460px;position:relative}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slider-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;pointer-events:none}
.slider-btn{pointer-events:auto;display:grid;place-items:center;width:46px;height:46px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.1);cursor:pointer}
.slider-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:8px;justify-content:center}
.slider-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.2);cursor:pointer}
.slider-dot.active{background:#fff}
.card{border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.25); transform:translateZ(0)}
input,select,textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);font-weight:600}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(0,229,255,.9); box-shadow:0 0 0 3px rgba(0,229,255,.25)}
label{display:block;margin:0 0 6px 0;color:var(--muted);font-weight:700}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.service-card::before{
  content:""; position:absolute; inset:-1px; border-radius:calc(var(--radius) + 2px);
  background:conic-gradient(from 180deg at 50% 50%, rgba(0,229,255,.35), rgba(124,58,237,.35), rgba(255,176,32,.35), rgba(22,242,179,.35), rgba(0,229,255,.35));
  z-index:-1; filter:blur(18px); opacity:.35; transition:opacity .25s ease
}
.service-card:hover::before{opacity:.7}
.service-card .title{font-weight:800;letter-spacing:-.01em}
.service-card .price{font-size:22px;background:linear-gradient(90deg,#fff,#bfe7ff,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feature{position:relative;overflow:hidden}
.feature .badge{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--g1),var(--g2));border:1px solid var(--line)}
.testis{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.testi .name{font-weight:800}
.faq{display:grid;grid-template-columns:1fr;gap:10px}
.faq details{border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:rgba(255,255,255,.04)}
.faq summary{cursor:pointer;font-weight:700}
.cta{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(0,229,255,.2),rgba(124,58,237,.2))}
.footer{padding:20px 0;color:var(--muted);border-top:1px solid var(--line);opacity:.9;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.reveal{opacity:0; transform:translateY(14px)}
.reveal.revealed{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger > *{opacity:0; transform: translateY(14px)}
.reveal-stagger.revealed > *{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.revealed > *:nth-child(1){ transition-delay: .00s }
.reveal-stagger.revealed > *:nth-child(2){ transition-delay: .06s }
.reveal-stagger.revealed > *:nth-child(3){ transition-delay: .12s }
.reveal-stagger.revealed > *:nth-child(4){ transition-delay: .18s }
.reveal-stagger.revealed > *:nth-child(5){ transition-delay: .24s }
.reveal-stagger.revealed > *:nth-child(6){ transition-delay: .30s }
.to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:999px;display:grid;place-items:center;color:#001; background:linear-gradient(90deg,var(--g1),var(--g2)); border:0; cursor:pointer; z-index:40; box-shadow:0 10px 28px rgba(0,0,0,.35)}