*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;background:#0b0b10;color:#e7e7ee;overflow:hidden}
:root{--primary:#7c5cff;--accent:#00e0ff;--muted:#9aa0a6;--glass:rgba(255,255,255,.08);--ring:rgba(124,92,255,.35)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.top-logo{width:100%;display:flex;justify-content:center;align-items:center;padding:22px 24px}
.top-logo img{max-width:min(80%,560px);height:auto;opacity:.95;filter:drop-shadow(0 6px 24px rgba(0,0,0,.25))}
.header,.footer{position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.brand .logo{flex:0 0 auto;filter:drop-shadow(0 2px 10px rgba(124,92,255,.25))}
.brand .brand-text{font-size:18px}
.bg{position:fixed;inset:0;background:radial-gradient(1200px 800px at 70% -10%,rgba(124,92,255,.35),transparent),radial-gradient(1000px 600px at -10% 80%,rgba(0,224,255,.25),transparent),linear-gradient(180deg,#0b0b10 0%,#0b0b10 100%);z-index:-3}
.blob{position:fixed;filter:blur(60px);opacity:.35;z-index:-2}
.b1{width:520px;height:520px;left:-120px;top:-80px;background:conic-gradient(from 0deg at 50% 50%,var(--primary),var(--accent),var(--primary));border-radius:35% 65% 60% 40%/55% 35% 65% 45%;animation:morph 14s ease-in-out infinite alternate}
.b2{width:460px;height:460px;right:-120px;bottom:-120px;background:conic-gradient(from 90deg at 50% 50%,#ff8bd1,#ffd966,#ff8bd1);border-radius:60% 40% 30% 70%/60% 50% 50% 40%;animation:morph 18s ease-in-out infinite alternate-reverse}
@keyframes morph{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(0,-20px,0) rotate(1turn)}}
.hero{display:grid;grid-template-columns:1fr;place-items:center;gap:32px;min-height:100svh}
.content h1{font-size:clamp(40px,6vw,64px);margin:0 0 12px;line-height:1.05}
.content p{margin:0 0 20px;color:var(--muted);font-size:clamp(16px,2.3vw,18px)}
.visual{position:relative;height:min(56vh,520px)}
.visual .visual-inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.visual .visual-logo{--tx:0px;--ty:0px;--shakeX:0px;--shakeY:0px;--shakeR:0deg;transform:translate(var(--tx), var(--ty)) translate(var(--shakeX), var(--shakeY)) rotate(var(--shakeR));z-index:2;max-width:min(95%,900px);width:auto;height:auto;opacity:.98;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));transition:transform .25s ease, filter .25s ease;will-change:transform}
.visual:hover .visual-logo{filter:drop-shadow(0 14px 36px rgba(0,0,0,.42))}
.visual .visual-text{margin-top:24px}
@media (max-width: 480px){
  .visual{height:520px}
  .visual .visual-logo{width:auto;max-width:100%}
  .visual .visual-text{margin-top:18px}
  .visual .visual-text h2{font-size:clamp(44px,12vw,72px)}
  .visual .visual-text p{font-size:clamp(44px,12vw,72px)}
}
.visual .visual-text h2{margin:0;font-size:clamp(30px,7.2vw,64px);letter-spacing:.5px;white-space:nowrap}
.visual .visual-text p{margin:4px 0 0;color:#e7e7ee;font-size:clamp(32px,6.5vw,64px)}

@media (max-width: 550px){
  .visual{height:560px}
  .container{padding-left:1px;padding-right:1px;max-width:none}
  .footer{padding:0 1px}
}
.visual .contact{margin-top:18px}
@keyframes logo-shake{0%{--shakeX:0px;--shakeY:0px;--shakeR:0deg}20%{--shakeX:1px;--shakeY:-1px;--shakeR:-0.4deg}40%{--shakeX:-1px;--shakeY:1px;--shakeR:0.4deg}60%{--shakeX:1px;--shakeY:0px;--shakeR:-0.3deg}80%{--shakeX:-1px;--shakeY:-1px;--shakeR:0.3deg}100%{--shakeX:0px;--shakeY:0px;--shakeR:0deg}}
.visual:hover .visual-logo{animation:logo-shake .6s ease-in-out infinite}

 @media (min-width: 1024px){
  .visual .visual-inner{top:30%}
  }

@media (max-width: 900px){
  .visual .visual-inner{top:50%}
}

.card{position:absolute;inset:auto;border-radius:22px;backdrop-filter:saturate(160%) blur(10px);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 60px -20px rgba(0,0,0,.6),0 0 0 0 var(--ring);transition:transform .3s ease, box-shadow .3s ease}
.c1{width:260px;height:180px;left:10%;top:12%;transform:rotate(-6deg)}
.c2{width:220px;height:140px;left:42%;top:44%;transform:rotate(8deg)}
.c3{width:180px;height:220px;left:62%;top:8%;transform:rotate(-12deg)}
.card:hover{box-shadow:0 30px 80px -30px var(--ring)}
.footer{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px;color:var(--muted);text-align:center;z-index:3}
.footer .copyright{display:inline;opacity:.9}
.footer .copyright .cmark{font-weight:700;color:#cfd3ff}
.footer .copyright .cmark::after{content:' '} /* © sonrası tek boşluk */
.footer .copyright a{display:block;margin-top:6px}
.footer .copyright .footer-logo{height:auto;max-height:20px;width:auto;opacity:.95;transform-origin:center bottom;transition:transform .2s ease}
.footer .copyright a:hover .footer-logo{animation:footer-logo-bounce .6s ease infinite}
.footer .copyright .footer-logo{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
@keyframes footer-logo-bounce{0%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(0)}80%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@media (max-width: 900px){.hero{grid-template-columns:1fr;gap:28px}.visual{order:-1}.container{padding-left:1px;padding-right:1px;max-width:none}.footer{padding:0 1px}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.blob{display:none}.card{box-shadow:none}}