/* ============================================================ Sagency — Kurumsal Site Teması v2 (Aydınlık • Çok Renkli) Apple esintili, yoğun animasyonlu, tam duyarlı ============================================================ */ :root{ /* --- 5 renkli marka paleti --- */ --c1:#5B4BFF; /* mor */ --c2:#00C2FF; /* camgöbeği */ --c3:#FF4D9D; /* pembe */ --c4:#FFB020; /* kehribar */ --c5:#12D6A0; /* nane */ --grad: linear-gradient(135deg,var(--c1) 0%,#7C5CFF 45%,var(--c2) 100%); --grad-warm: linear-gradient(135deg,var(--c3) 0%,#FF7A6B 50%,var(--c4) 100%); --grad-cool: linear-gradient(135deg,var(--c2) 0%,#3BE0C6 55%,var(--c5) 100%); --grad-rainbow: linear-gradient(100deg,var(--c1),var(--c3) 22%,var(--c4) 44%,var(--c5) 66%,var(--c2) 88%,var(--c1)); --grad-soft: linear-gradient(135deg,rgba(91,75,255,.10),rgba(0,194,255,.10)); --grad-text: linear-gradient(100deg,var(--c1),var(--c3) 40%,var(--c2) 75%,var(--c5)); --ink:#0E1020; --ink-2:#39405A; --ink-3:#737A96; --ink-4:#A6ACC4; --line:#E7EAF5; --line-2:#F1F3FA; --bg:#FFFFFF; --bg-2:#F7F8FD; --bg-3:#EDF0FA; --ok:#12B76A; --warn:#F5B301; --bad:#E11D48; --info:#3B82F6; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --r-2xl:44px; --r-full:999px; --sh-1:0 2px 8px rgba(20,22,60,.05); --sh-2:0 10px 34px rgba(20,22,60,.09); --sh-3:0 24px 70px rgba(20,22,60,.14); --sh-glow:0 18px 46px rgba(91,75,255,.34); --sh-pink:0 18px 46px rgba(255,77,157,.30); --sh-mint:0 18px 46px rgba(18,214,160,.28); --ease:cubic-bezier(.22,1,.36,1); --ease-b:cubic-bezier(.34,1.56,.64,1); /* hafif zıplama */ --nav-h:76px; --maxw:1220px; --tap:46px; /* mobil dokunma hedefi */ } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px} body{ margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Arial,sans-serif; color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden; padding-bottom:env(safe-area-inset-bottom); } img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4,h5{margin:0;line-height:1.16;letter-spacing:-.03em;font-weight:750} h1{font-size:clamp(2.3rem,5.4vw,4.5rem);letter-spacing:-.045em} h2{font-size:clamp(1.8rem,3.6vw,3rem);letter-spacing:-.038em} h3{font-size:clamp(1.2rem,2vw,1.6rem)} p{margin:0} ul{margin:0;padding:0;list-style:none} ::selection{background:rgba(91,75,255,.2)} :focus-visible{outline:3px solid var(--c1);outline-offset:3px;border-radius:6px} /* ---------------- Yardımcılar ---------------- */ .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} .container-sm{max-width:880px} .section{padding:clamp(66px,9vw,124px) 0;position:relative} .section-tight{padding:clamp(48px,6vw,84px) 0} .text-center{text-align:center} .muted{color:var(--ink-3)} .lead{font-size:clamp(1.03rem,1.6vw,1.24rem);color:var(--ink-2);line-height:1.78} .grid{display:grid;gap:24px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .flex{display:flex}.aic{align-items:center}.jcb{justify-content:space-between}.jcc{justify-content:center} .gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px} .wrap{flex-wrap:wrap} .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} /* Animasyonlu gradyan metin */ .grad-text{ background:var(--grad-text);background-size:300% 100%; -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; animation:hueShift 9s ease-in-out infinite; } @keyframes hueShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* Kaydırma ilerleme çubuğu */ .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000; background:var(--grad-rainbow);background-size:300% 100%;animation:hueShift 6s linear infinite; box-shadow:0 0 12px rgba(91,75,255,.5);transition:width .1s linear} /* Atlama bağlantısı (erişilebilirlik) */ .skip-link{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--c1);color:#fff; padding:12px 20px;border-radius:0 0 12px 0;font-weight:650} .skip-link:focus{left:0} /* ---------------- Bölüm başlığı ---------------- */ .sec-head{max-width:780px;margin:0 auto clamp(44px,5vw,68px);text-align:center} .sec-head.left{margin-left:0;text-align:left} .eyebrow{ display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:750;letter-spacing:.14em; text-transform:uppercase;color:var(--c1);position:relative; padding:9px 18px 9px 16px;border-radius:var(--r-full);margin-bottom:18px; background:#fff;box-shadow:var(--sh-1); } .eyebrow::after{ content:'';pointer-events:none;position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:var(--grad-rainbow);background-size:300% 100%;animation:hueShift 6s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; } .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--grad);animation:pulse 2.4s infinite;flex-shrink:0} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}} .sec-head p{margin-top:16px;color:var(--ink-2);font-size:clamp(1rem,1.4vw,1.14rem)} /* Dalgalı vurgu altı çizgisi */ .underline-wave{position:relative;white-space:nowrap} .underline-wave::after{ content:'';position:absolute;left:0;right:0;bottom:-.12em;height:.28em; background:var(--grad-warm);border-radius:var(--r-full);opacity:.32; transform:scaleX(0);transform-origin:left;animation:growLine 1s var(--ease) .5s forwards; } @keyframes growLine{to{transform:scaleX(1)}} /* ---------------- Butonlar ---------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:var(--tap);padding:15px 32px;border-radius:var(--r-full);border:none;cursor:pointer; font-size:15px;font-weight:650;letter-spacing:-.01em;position:relative;overflow:hidden; background:var(--grad);background-size:200% 200%;color:#fff;box-shadow:var(--sh-glow); transition:transform .4s var(--ease-b),box-shadow .4s var(--ease),background-position .6s var(--ease); isolation:isolate;white-space:nowrap;-webkit-tap-highlight-color:transparent; } .btn::after{ content:'';position:absolute;top:0;left:-130%;width:65%;height:100%;z-index:1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-22deg);transition:left .8s var(--ease); } .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 26px 60px rgba(91,75,255,.44);background-position:100% 50%} .btn:hover::after{left:135%} .btn:active{transform:translateY(-1px) scale(.99)} .btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--sh-1);border:1.6px solid var(--line)} .btn-ghost:hover{box-shadow:var(--sh-2);border-color:transparent;color:var(--c1)} .btn-ghost::before{content:'';pointer-events:none;position:absolute;inset:-1.6px;border-radius:inherit;padding:1.6px;z-index:-1;opacity:0; background:var(--grad-rainbow);background-size:300% 100%;animation:hueShift 5s linear infinite;transition:opacity .35s; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .btn-ghost:hover::before{opacity:1} .btn-outline{background:transparent;color:var(--c1);box-shadow:none;border:1.7px solid rgba(91,75,255,.35)} .btn-outline:hover{background:var(--grad-soft);box-shadow:0 12px 32px rgba(91,75,255,.18)} .btn-glass{background:rgba(255,255,255,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1.6px solid rgba(255,255,255,.42);box-shadow:0 12px 38px rgba(0,0,0,.12);color:#fff} .btn-glass:hover{background:rgba(255,255,255,.3)} .btn-pink{background:var(--grad-warm);box-shadow:var(--sh-pink)} .btn-mint{background:var(--grad-cool);box-shadow:var(--sh-mint)} .btn-lg{padding:18px 42px;font-size:16.5px;min-height:56px} .btn-sm{padding:11px 22px;font-size:14px;min-height:40px} .btn-block{width:100%} .btn .ico{transition:transform .4s var(--ease-b)} .btn:hover .ico{transform:translateX(5px)} /* Dalga (ripple) efekti */ .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55); transform:scale(0);animation:rippleOut .65s var(--ease);pointer-events:none;z-index:2} @keyframes rippleOut{to{transform:scale(3.2);opacity:0}} /* ---------------- Üst menü ---------------- */ .nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:900;display:flex;align-items:center; transition:background .45s var(--ease),box-shadow .45s var(--ease),height .45s var(--ease)} .nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px); box-shadow:0 1px 0 rgba(20,22,60,.06),0 12px 36px rgba(20,22,60,.07);height:66px} .nav .container{display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:21px;letter-spacing:-.045em;flex-shrink:0} .logo-mark{width:40px;height:40px;border-radius:13px;background:var(--grad);background-size:200% 200%;color:#fff; display:grid;place-items:center;font-size:19px;font-weight:800;box-shadow:var(--sh-glow); transition:transform .55s var(--ease-b);animation:hueShift 8s ease-in-out infinite} .logo:hover .logo-mark{transform:rotate(-10deg) scale(1.1)} .logo img{height:40px;width:auto} .nav-links{display:flex;align-items:center;gap:2px} .nav-links a{padding:10px 16px;border-radius:var(--r-full);font-size:14.5px;font-weight:550;color:var(--ink-2); position:relative;transition:color .28s,background .28s} .nav-links a::after{content:'';position:absolute;left:50%;bottom:5px;width:0;height:2.5px;border-radius:3px; background:var(--grad-rainbow);background-size:300% 100%;animation:hueShift 5s linear infinite; transform:translateX(-50%);transition:width .38s var(--ease)} .nav-links a:hover{color:var(--ink);background:var(--bg-2)} .nav-links a:hover::after,.nav-links a.active::after{width:24px} .nav-links a.active{color:var(--c1);font-weight:680} .nav-cta{display:flex;align-items:center;gap:10px} .nav-toggle{display:none;background:none;border:none;padding:11px;cursor:pointer;border-radius:12px; min-width:var(--tap);min-height:var(--tap);align-items:center;justify-content:center} .nav-toggle span{display:block;width:22px;height:2.2px;background:var(--ink);border-radius:2px;transition:.4s var(--ease-b)} .nav-toggle span+span{margin-top:5px} .nav-toggle.on span:nth-child(1){transform:translateY(7.2px) rotate(45deg)} .nav-toggle.on span:nth-child(2){opacity:0;transform:scaleX(0)} .nav-toggle.on span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)} .mobile-menu{position:fixed;inset:var(--nav-h) 0 0;background:rgba(255,255,255,.98);backdrop-filter:blur(22px); z-index:890;padding:24px 20px calc(40px + env(safe-area-inset-bottom));overflow-y:auto; opacity:0;visibility:hidden;transform:translateY(-14px);transition:.42s var(--ease)} .mobile-menu.open{opacity:1;visibility:visible;transform:none} .mobile-menu a{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap); padding:16px 18px;border-radius:var(--r);font-size:17px;font-weight:600;border-bottom:1px solid var(--line-2)} .mobile-menu a::after{content:'→';opacity:.3;transition:transform .3s} .mobile-menu a:active{background:var(--bg-2)} .mobile-menu .btn{margin-top:14px;width:100%} .mobile-menu .btn::after{content:none} /* ---------------- HERO ---------------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden; padding:calc(var(--nav-h) + 44px) 0 64px} .hero-bg{position:absolute;inset:0;z-index:0;background: radial-gradient(ellipse 70% 55% at 10% 5%,rgba(91,75,255,.20),transparent 62%), radial-gradient(ellipse 58% 48% at 90% 12%,rgba(0,194,255,.20),transparent 60%), radial-gradient(ellipse 55% 45% at 78% 88%,rgba(255,77,157,.17),transparent 60%), radial-gradient(ellipse 50% 42% at 18% 92%,rgba(18,214,160,.15),transparent 62%), radial-gradient(ellipse 40% 34% at 50% 45%,rgba(255,176,32,.10),transparent 65%), linear-gradient(180deg,#fff 0%,#FBFBFF 50%,#F4F7FF 100%)} /* Morph olan renkli lekeler */ .hero-orb{position:absolute;filter:blur(64px);opacity:.55;z-index:0;will-change:transform,border-radius} .orb-1{width:min(44vw,540px);aspect-ratio:1;background:radial-gradient(circle,rgba(91,75,255,.6),transparent 68%); top:-10%;left:-8%;animation:float1 22s ease-in-out infinite,morph 16s ease-in-out infinite} .orb-2{width:min(38vw,470px);aspect-ratio:1;background:radial-gradient(circle,rgba(0,194,255,.55),transparent 68%); top:6%;right:-10%;animation:float2 26s ease-in-out infinite,morph 19s ease-in-out infinite reverse} .orb-3{width:min(34vw,410px);aspect-ratio:1;background:radial-gradient(circle,rgba(255,77,157,.5),transparent 68%); bottom:-14%;left:34%;animation:float3 30s ease-in-out infinite,morph 22s ease-in-out infinite} .orb-4{width:min(26vw,320px);aspect-ratio:1;background:radial-gradient(circle,rgba(18,214,160,.45),transparent 68%); top:38%;left:6%;animation:float2 34s ease-in-out infinite reverse,morph 18s ease-in-out infinite} .orb-5{width:min(22vw,280px);aspect-ratio:1;background:radial-gradient(circle,rgba(255,176,32,.42),transparent 68%); top:14%;right:28%;animation:float1 28s ease-in-out infinite reverse,morph 21s ease-in-out infinite reverse} @keyframes morph{ 0%,100%{border-radius:60% 40% 42% 58%/52% 46% 54% 48%} 33%{border-radius:38% 62% 58% 42%/44% 58% 42% 56%} 66%{border-radius:52% 48% 34% 66%/62% 38% 62% 38%} } @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(64px,52px) scale(1.12)}66%{transform:translate(-32px,84px) scale(.92)}} @keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-74px,62px) scale(1.16)}} @keyframes float3{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(54px,-64px) scale(1.1)}80%{transform:translate(-44px,-22px) scale(.94)}} .hero-grid-lines{position:absolute;inset:0;z-index:0;opacity:.45; background-image:linear-gradient(rgba(91,75,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(91,75,255,.06) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 78% 68% at 50% 40%,#000 18%,transparent 76%); -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 40%,#000 18%,transparent 76%); animation:gridDrift 40s linear infinite} @keyframes gridDrift{to{background-position:60px 60px,60px 60px}} /* Yüzen renkli parçacıklar */ .sparkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .sparkle{position:absolute;width:8px;height:8px;border-radius:50%;opacity:.65; animation:floatUp linear infinite} @keyframes floatUp{ 0%{transform:translateY(20px) scale(.4);opacity:0} 12%{opacity:.7} 88%{opacity:.5} 100%{transform:translateY(-110vh) scale(1.1);opacity:0} } .hero .container{position:relative;z-index:2} .hero-inner{max-width:980px;margin:0 auto;text-align:center} .hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:var(--r-full); background:rgba(255,255,255,.85);backdrop-filter:blur(16px);border:1px solid rgba(91,75,255,.14); box-shadow:var(--sh-1);font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:28px; animation:fadeUp .9s var(--ease) both} .hero-badge b{background:var(--grad-warm);color:#fff;padding:5px 13px;border-radius:var(--r-full); font-size:11.5px;letter-spacing:.06em;text-transform:uppercase} .hero h1{margin-bottom:26px} .hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em} .hero h1 .line>span{display:block;animation:riseIn 1.1s var(--ease) both} .hero h1 .line:nth-child(2)>span{animation-delay:.13s} .hero h1 .line:nth-child(3)>span{animation-delay:.26s} @keyframes riseIn{from{transform:translateY(108%) rotate(3deg);opacity:0}to{transform:none;opacity:1}} .hero-sub{max-width:680px;margin:0 auto 40px;font-size:clamp(1.04rem,1.7vw,1.3rem);color:var(--ink-2); animation:fadeUp 1s var(--ease) .38s both} .hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeUp 1s var(--ease) .5s both} @keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .hero-stats{display:flex;gap:clamp(22px,5vw,68px);justify-content:center;flex-wrap:wrap;margin-top:64px; animation:fadeUp 1s var(--ease) .62s both} .hero-stat{text-align:center;position:relative} .hero-stat b{display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.045em;line-height:1.1} .hero-stat:nth-child(1) b{background:linear-gradient(120deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent} .hero-stat:nth-child(2) b{background:linear-gradient(120deg,var(--c3),var(--c4));-webkit-background-clip:text;background-clip:text;color:transparent} .hero-stat:nth-child(3) b{background:linear-gradient(120deg,var(--c5),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent} .hero-stat:nth-child(4) b{background:linear-gradient(120deg,var(--c4),var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent} .hero-stat span{font-size:13.5px;color:var(--ink-3);font-weight:550} .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--ink-3); font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;display:flex;flex-direction:column; align-items:center;gap:10px;animation:fadeUp 1s 1.1s both} .scroll-hint i{display:block;width:1.6px;height:40px;background:linear-gradient(180deg,var(--c1),transparent); border-radius:2px;animation:scrollDot 2.2s var(--ease) infinite} @keyframes scrollDot{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* Dalga ayraç */ .wave-divider{position:relative;line-height:0;margin-top:-1px} .wave-divider svg{width:100%;height:clamp(46px,6vw,90px);display:block} /* ---------------- Gradyan slider ---------------- */ .gslider{position:relative;border-radius:var(--r-2xl);overflow:hidden;min-height:clamp(400px,52vw,540px);box-shadow:var(--sh-3)} .gslide{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(30px,5vw,72px); opacity:0;transform:scale(1.05);transition:opacity 1s var(--ease),transform 1.5s var(--ease);pointer-events:none} .gslide.active{opacity:1;transform:none;pointer-events:auto} .gslide::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 78% 20%,rgba(255,255,255,.3),transparent 55%), radial-gradient(circle at 12% 88%,rgba(0,0,0,.14),transparent 52%)} .gslide-inner{position:relative;z-index:2;max-width:660px;color:#fff} .gslide .badge-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 17px;border-radius:var(--r-full); background:rgba(255,255,255,.22);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.34); font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:20px} .gslide h2{color:#fff;margin-bottom:16px;text-shadow:0 6px 30px rgba(0,0,0,.18)} .gslide p{color:rgba(255,255,255,.94);font-size:clamp(1rem,1.5vw,1.16rem);margin-bottom:32px;max-width:540px} .gslide-actions{display:flex;gap:12px;flex-wrap:wrap} .gslider-dots{position:absolute;bottom:26px;left:clamp(30px,5vw,72px);display:flex;gap:9px;z-index:5} .gdot{width:10px;height:10px;border-radius:var(--r-full);background:rgba(255,255,255,.45);border:none; cursor:pointer;transition:.45s var(--ease-b);padding:0;min-width:auto} .gdot.active{width:38px;background:#fff} .gslider-nav{position:absolute;bottom:22px;right:clamp(30px,5vw,72px);display:flex;gap:8px;z-index:5} .gnav{width:var(--tap);height:var(--tap);border-radius:50%;background:rgba(255,255,255,.2); backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.34);color:#fff;cursor:pointer; display:grid;place-items:center;transition:.32s var(--ease-b)} .gnav:hover{background:rgba(255,255,255,.36);transform:scale(1.1)} .gslider-bar{position:absolute;left:0;bottom:0;height:3px;background:rgba(255,255,255,.85);width:0;z-index:6} .gslider-bar.run{animation:sliderBar 6.5s linear forwards} @keyframes sliderBar{to{width:100%}} /* ---------------- Akan yazı ---------------- */ .marquee{overflow:hidden;padding:24px 0;position:relative; background:linear-gradient(90deg,#F7F8FD,#FFF6FA 25%,#F4FBFF 50%,#F7FFFA 75%,#F7F8FD); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,#F7F8FD,transparent)} .marquee::after{right:0;background:linear-gradient(270deg,#F7F8FD,transparent)} .marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-item{display:flex;align-items:center;gap:18px;padding:0 26px; font-size:clamp(1.05rem,2.1vw,1.65rem);font-weight:750;letter-spacing:-.035em;white-space:nowrap} .marquee-item i{width:9px;height:9px;border-radius:50%;flex-shrink:0} .marquee-item:nth-child(5n+1){color:var(--ink-2)} .marquee-item:nth-child(5n+1) i{background:var(--c1)} .marquee-item:nth-child(5n+2){color:var(--c3)} .marquee-item:nth-child(5n+2) i{background:var(--c3)} .marquee-item:nth-child(5n+3){color:var(--c2)} .marquee-item:nth-child(5n+3) i{background:var(--c2)} .marquee-item:nth-child(5n+4){color:var(--c5)} .marquee-item:nth-child(5n+4) i{background:var(--c5)} .marquee-item:nth-child(5n+5){color:var(--c4)} .marquee-item:nth-child(5n+5) i{background:var(--c4)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------------- Kartlar ---------------- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;position:relative; overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s; transform-style:preserve-3d} /* Fare takipli renkli parıltı */ .card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(91,75,255,.10),transparent 45%); transition:opacity .4s} .card:hover::after{opacity:1} .card::before{content:'';pointer-events:none;position:absolute;inset:0;border-radius:inherit;padding:1.6px;opacity:0; background:var(--grad-rainbow);background-size:300% 100%;animation:hueShift 6s linear infinite; transition:opacity .45s var(--ease); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .card:hover{transform:translateY(-9px);box-shadow:var(--sh-3);border-color:transparent} .card:hover::before{opacity:1} /* Hizmet kartı — her kart farklı renk aksanı */ .svc-card{display:flex;flex-direction:column;height:100%} .svc-icon{width:60px;height:60px;border-radius:19px;display:grid;place-items:center;margin-bottom:22px; transition:.55s var(--ease-b);position:relative} .svc-card h3{margin-bottom:10px;font-size:1.2rem} .svc-card p{color:var(--ink-3);font-size:14.5px;flex:1;margin-bottom:20px} .svc-card:nth-child(6n+1) .svc-icon{background:linear-gradient(135deg,rgba(91,75,255,.14),rgba(0,194,255,.14));color:var(--c1)} .svc-card:nth-child(6n+2) .svc-icon{background:linear-gradient(135deg,rgba(255,77,157,.14),rgba(255,176,32,.14));color:var(--c3)} .svc-card:nth-child(6n+3) .svc-icon{background:linear-gradient(135deg,rgba(18,214,160,.16),rgba(0,194,255,.14));color:var(--c5)} .svc-card:nth-child(6n+4) .svc-icon{background:linear-gradient(135deg,rgba(255,176,32,.18),rgba(255,77,157,.12));color:#E0940B} .svc-card:nth-child(6n+5) .svc-icon{background:linear-gradient(135deg,rgba(0,194,255,.16),rgba(91,75,255,.14));color:var(--c2)} .svc-card:nth-child(6n+6) .svc-icon{background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(255,77,157,.12));color:#7C5CFF} .svc-card:hover .svc-icon{transform:rotate(-9deg) scale(1.12);color:#fff} .svc-card:nth-child(6n+1):hover .svc-icon{background:var(--grad);box-shadow:var(--sh-glow)} .svc-card:nth-child(6n+2):hover .svc-icon{background:var(--grad-warm);box-shadow:var(--sh-pink)} .svc-card:nth-child(6n+3):hover .svc-icon{background:var(--grad-cool);box-shadow:var(--sh-mint)} .svc-card:nth-child(6n+4):hover .svc-icon{background:linear-gradient(135deg,var(--c4),var(--c3));box-shadow:0 18px 46px rgba(255,176,32,.3)} .svc-card:nth-child(6n+5):hover .svc-icon{background:linear-gradient(135deg,var(--c2),var(--c1));box-shadow:var(--sh-glow)} .svc-card:nth-child(6n+6):hover .svc-icon{background:linear-gradient(135deg,#7C5CFF,var(--c3));box-shadow:var(--sh-pink)} .svc-price{display:flex;align-items:baseline;gap:6px;margin-bottom:18px} .svc-price b{font-size:1.55rem;font-weight:800;letter-spacing:-.035em; background:var(--grad-text);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent} .svc-price span{font-size:13px;color:var(--ink-3)} .svc-link{display:inline-flex;align-items:center;gap:7px;color:var(--c1);font-weight:680;font-size:14.5px; transition:gap .35s var(--ease-b)} .svc-link:hover{gap:14px} .svc-features{margin:0 0 20px} .svc-features li{position:relative;padding:6px 0 6px 27px;font-size:14px;color:var(--ink-2)} .svc-features li::before{content:'';position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%; background:var(--grad-soft)} .svc-features li::after{content:'';position:absolute;left:4.6px;top:15.5px;width:6.5px;height:3.2px; border-left:1.9px solid var(--c1);border-bottom:1.9px solid var(--c1);transform:rotate(-45deg)} .card.featured{background:linear-gradient(165deg,#fff,#FCFBFF 60%,#FFF7FB)} .card.featured::after{opacity:.4} .ribbon{position:absolute;top:18px;right:-34px;background:var(--grad-warm);color:#fff;font-size:11px; font-weight:750;letter-spacing:.1em;text-transform:uppercase;padding:6px 42px;transform:rotate(38deg); box-shadow:var(--sh-pink);z-index:3} /* ---------------- Özellik / neden biz ---------------- */ .feature{display:flex;gap:18px;align-items:flex-start} .feature-ico{width:50px;height:50px;flex-shrink:0;border-radius:15px;display:grid;place-items:center; transition:.5s var(--ease-b)} .feature:nth-child(4n+1) .feature-ico{background:rgba(91,75,255,.12);color:var(--c1)} .feature:nth-child(4n+2) .feature-ico{background:rgba(255,77,157,.12);color:var(--c3)} .feature:nth-child(4n+3) .feature-ico{background:rgba(18,214,160,.14);color:var(--c5)} .feature:nth-child(4n+4) .feature-ico{background:rgba(255,176,32,.16);color:#E0940B} .feature:hover .feature-ico{transform:scale(1.12) rotate(-6deg)} .feature h4{font-size:1.04rem;margin-bottom:6px;font-weight:700} .feature p{font-size:14.4px;color:var(--ink-3)} /* ---------------- Sayaçlar ---------------- */ .counters{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .counter{padding:34px 20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line); transition:.5s var(--ease);position:relative;overflow:hidden} .counter::before{content:'';pointer-events:none;position:absolute;inset:0;opacity:.07;transition:opacity .5s} .counter:nth-child(1)::before{background:var(--grad)} .counter:nth-child(2)::before{background:var(--grad-warm)} .counter:nth-child(3)::before{background:var(--grad-cool)} .counter:nth-child(4)::before{background:linear-gradient(135deg,var(--c4),var(--c3))} .counter:hover{box-shadow:var(--sh-2);transform:translateY(-7px)} .counter:hover::before{opacity:.14} .counter b{display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.045em; line-height:1.1;position:relative} .counter:nth-child(1) b{color:var(--c1)}.counter:nth-child(2) b{color:var(--c3)} .counter:nth-child(3) b{color:var(--c5)}.counter:nth-child(4) b{color:#E0940B} .counter span{font-size:14px;color:var(--ink-3);font-weight:550;position:relative} /* ---------------- Süreç adımları ---------------- */ .step-card{position:relative;overflow:hidden} .step-num{font-size:2.8rem;font-weight:800;letter-spacing:-.05em;line-height:1;margin-bottom:16px} .step-card:nth-child(4n+1) .step-num{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .step-card:nth-child(4n+2) .step-num{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent} .step-card:nth-child(4n+3) .step-num{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent} .step-card:nth-child(4n+4) .step-num{background:linear-gradient(135deg,var(--c4),var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------------- Portfolyo ---------------- */ .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pf-card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;cursor:pointer; box-shadow:var(--sh-1);transition:.55s var(--ease)} .pf-card:nth-child(5n+1){background:var(--grad)} .pf-card:nth-child(5n+2){background:var(--grad-warm)} .pf-card:nth-child(5n+3){background:var(--grad-cool)} .pf-card:nth-child(5n+4){background:linear-gradient(135deg,var(--c4),var(--c3))} .pf-card:nth-child(5n+5){background:linear-gradient(135deg,var(--c2),var(--c1))} .pf-card:hover{transform:translateY(-9px) scale(1.014);box-shadow:var(--sh-3)} .pf-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .pf-card:hover img{transform:scale(1.1)} .pf-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px; background:linear-gradient(0deg,rgba(9,10,30,.88) 0%,rgba(9,10,30,.28) 48%,transparent 78%);color:#fff; opacity:.94;transition:.5s var(--ease)} .pf-card:hover .pf-overlay{opacity:1;background:linear-gradient(0deg,rgba(9,10,30,.93) 0%,rgba(9,10,30,.44) 55%,rgba(9,10,30,.06) 100%)} .pf-overlay small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:700} .pf-overlay h4{font-size:1.16rem;margin:6px 0 0;transform:translateY(7px);transition:.5s var(--ease-b)} .pf-card:hover .pf-overlay h4{transform:none} .pf-noimg{width:100%;height:100%;display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:3rem;font-weight:800} /* ---------------- Yorumlar ---------------- */ .tst-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;height:100%; display:flex;flex-direction:column;transition:.5s var(--ease);position:relative;overflow:hidden} .tst-card::before{content:'';pointer-events:none;position:absolute;top:0;left:0;right:0;height:4px} .tst-card:nth-child(3n+1)::before{background:var(--grad)} .tst-card:nth-child(3n+2)::before{background:var(--grad-warm)} .tst-card:nth-child(3n+3)::before{background:var(--grad-cool)} .tst-card:hover{box-shadow:var(--sh-2);transform:translateY(-6px)} .tst-quote{font-size:54px;line-height:1;opacity:.18;font-family:Georgia,serif;margin-bottom:-16px} .tst-card:nth-child(3n+1) .tst-quote{color:var(--c1)} .tst-card:nth-child(3n+2) .tst-quote{color:var(--c3)} .tst-card:nth-child(3n+3) .tst-quote{color:var(--c5)} .tst-card p{flex:1;color:var(--ink-2);font-size:15px;line-height:1.82;margin-bottom:22px} .tst-user{display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid var(--line-2)} .tst-avatar{width:46px;height:46px;border-radius:50%;color:#fff;display:grid;place-items:center; font-weight:750;font-size:15px;flex-shrink:0;overflow:hidden} .tst-card:nth-child(3n+1) .tst-avatar{background:var(--grad)} .tst-card:nth-child(3n+2) .tst-avatar{background:var(--grad-warm)} .tst-card:nth-child(3n+3) .tst-avatar{background:var(--grad-cool)} .tst-avatar img{width:100%;height:100%;object-fit:cover} .tst-user b{display:block;font-size:14.5px} .tst-user span{font-size:12.8px;color:var(--ink-3)} .stars{display:flex;gap:2px;margin-bottom:14px} .star{color:#E4E7F2;font-size:16px} .star.on{color:var(--c4)} /* ---------------- Akordiyon ---------------- */ .acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin-bottom:12px; transition:.42s var(--ease)} .acc.open{box-shadow:var(--sh-2);border-color:rgba(91,75,255,.26)} .acc-q{width:100%;text-align:left;background:none;border:none;padding:22px 26px;font-size:16px;font-weight:650; cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--ink); transition:color .3s;min-height:var(--tap)} .acc.open .acc-q{color:var(--c1)} .acc-q i{width:28px;height:28px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center; flex-shrink:0;position:relative;transition:.48s var(--ease-b)} .acc.open .acc-q i{background:var(--grad);transform:rotate(135deg)} .acc-q i::before,.acc-q i::after{content:'';position:absolute;background:var(--ink-2);border-radius:2px;transition:.35s} .acc-q i::before{width:12px;height:1.9px} .acc-q i::after{width:1.9px;height:12px} .acc.open .acc-q i::before,.acc.open .acc-q i::after{background:#fff} .acc-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)} .acc-a-in{padding:0 26px 24px;color:var(--ink-2);font-size:15px;line-height:1.82} /* ---------------- CTA şeridi ---------------- */ .cta-band{position:relative;border-radius:var(--r-2xl);padding:clamp(44px,6vw,80px);overflow:hidden; background:var(--grad-rainbow);background-size:300% 100%;animation:hueShift 12s ease-in-out infinite; color:#fff;text-align:center;box-shadow:0 30px 70px rgba(91,75,255,.3)} .cta-band::before{content:'';pointer-events:none;position:absolute;inset:0; background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.28),transparent 48%), radial-gradient(circle at 82% 80%,rgba(0,0,0,.16),transparent 52%)} .cta-band>*{position:relative;z-index:2} .cta-band h2{color:#fff;margin-bottom:14px} .cta-band p{color:rgba(255,255,255,.94);max-width:580px;margin:0 auto 32px;font-size:1.08rem} .cta-band .btn{background:#fff;color:var(--c1);box-shadow:0 16px 44px rgba(0,0,0,.18)} .cta-band .btn:hover{color:var(--c3)} .cta-band .btn-glass{background:rgba(255,255,255,.2);color:#fff} /* ---------------- Formlar ---------------- */ .form-group{margin-bottom:20px} .form-label{display:block;font-size:13.5px;font-weight:660;margin-bottom:8px;color:var(--ink-2)} .form-label .req{color:var(--c3)} .form-control{width:100%;min-height:var(--tap);padding:14px 17px;border:1.7px solid var(--line);border-radius:14px; background:var(--bg-2);font-size:16px;transition:.28s var(--ease);font-family:inherit} .form-control:hover{border-color:#D6DAEA} .form-control:focus{outline:none;border-color:var(--c1);background:#fff;box-shadow:0 0 0 4px rgba(91,75,255,.12)} .form-control::placeholder{color:#A9AEC4} textarea.form-control{min-height:140px;resize:vertical;line-height:1.7} select.form-control{cursor:pointer;appearance:none;padding-right:46px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737A96' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form-hint{font-size:12.5px;color:var(--ink-3);margin-top:6px} .form-error{font-size:12.8px;color:var(--bad);margin-top:6px;font-weight:560} .form-control.is-error{border-color:var(--bad);background:#FFF6F8} .check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:14px;color:var(--ink-2); line-height:1.6;min-height:var(--tap);padding:4px 0} .check input{width:21px;height:21px;margin:1px 0 0;accent-color:var(--c1);cursor:pointer;flex-shrink:0} .chip-group{display:flex;flex-wrap:wrap;gap:10px} .chip{position:relative;cursor:pointer} .chip input{position:absolute;opacity:0;pointer-events:none} .chip span{display:block;min-height:42px;display:flex;align-items:center;padding:11px 19px; border-radius:var(--r-full);border:1.7px solid var(--line);background:var(--bg-2);font-size:13.8px; font-weight:560;transition:.32s var(--ease-b)} .chip input:checked+span{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--sh-glow);transform:scale(1.03)} .chip:nth-child(4n+2) input:checked+span{background:var(--grad-warm);box-shadow:var(--sh-pink)} .chip:nth-child(4n+3) input:checked+span{background:var(--grad-cool);box-shadow:var(--sh-mint)} .chip:hover span{border-color:rgba(91,75,255,.42)} .chip input:focus-visible+span{outline:3px solid var(--c1);outline-offset:2px} .pw-meter{height:6px;border-radius:4px;background:var(--bg-3);margin-top:9px;overflow:hidden} .pw-meter i{display:block;height:100%;width:0;border-radius:4px;transition:.45s var(--ease);background:var(--bad)} .pw-meter.m1 i{width:20%} .pw-meter.m2 i{width:45%;background:var(--c4)} .pw-meter.m3 i{width:72%;background:var(--c2)} .pw-meter.m4 i{width:100%;background:var(--c5)} /* ---------------- Uyarılar ---------------- */ .alert{padding:15px 20px;border-radius:14px;font-size:14.5px;margin-bottom:20px;display:flex;gap:12px; align-items:flex-start;line-height:1.68;animation:fadeUp .5s var(--ease)} .alert-success{background:#E9FAF2;color:#08653A;border-left:4px solid var(--ok)} .alert-error,.alert-danger{background:#FFEEF1;color:#A3122F;border-left:4px solid var(--bad)} .alert-warning,.alert-warn{background:#FFF8E6;color:#8A6D18;border-left:4px solid var(--warn)} .alert-info{background:#EEF1FF;color:#2C3282;border-left:4px solid var(--c1)} /* ---------------- Sayfa başlığı ---------------- */ .page-hero{position:relative;padding:calc(var(--nav-h) + 66px) 0 66px;overflow:hidden; background:radial-gradient(ellipse 64% 58% at 12% 0%,rgba(91,75,255,.15),transparent 60%), radial-gradient(ellipse 56% 52% at 88% 8%,rgba(0,194,255,.15),transparent 58%), radial-gradient(ellipse 44% 40% at 62% 96%,rgba(255,77,157,.12),transparent 60%), linear-gradient(180deg,#fff,#FAFBFF)} .page-hero h1{margin-bottom:14px} .page-hero p{max-width:640px;color:var(--ink-2);font-size:1.09rem} .crumbs{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ink-3);margin-bottom:18px;flex-wrap:wrap} .crumbs a:hover{color:var(--c1)} .crumbs i{opacity:.45;font-style:normal} /* ---------------- Blog ---------------- */ .post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;height:100%;transition:.5s var(--ease)} .post-card:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:transparent} .post-cover{aspect-ratio:16/10;overflow:hidden;position:relative} .post-card:nth-child(3n+1) .post-cover{background:var(--grad)} .post-card:nth-child(3n+2) .post-cover{background:var(--grad-warm)} .post-card:nth-child(3n+3) .post-cover{background:var(--grad-cool)} .post-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .post-card:hover .post-cover img{transform:scale(1.08)} .post-cat{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px); padding:7px 15px;border-radius:var(--r-full);font-size:11.5px;font-weight:750;letter-spacing:.07em; text-transform:uppercase;color:var(--c1);z-index:2} .post-body{padding:26px;display:flex;flex-direction:column;flex:1} .post-body h3{font-size:1.14rem;margin-bottom:10px;line-height:1.4} .post-body p{color:var(--ink-3);font-size:14.3px;flex:1;margin-bottom:18px} .post-meta{display:flex;gap:14px;font-size:12.8px;color:var(--ink-3);padding-top:16px;border-top:1px solid var(--line-2)} .article{max-width:820px;margin:0 auto;font-size:17.5px;line-height:1.88;color:var(--ink-2)} .article h2{margin:46px 0 16px;color:var(--ink);font-size:1.78rem} .article h3{margin:34px 0 12px;color:var(--ink)} .article p{margin-bottom:20px} .article ul,.article ol{margin:0 0 22px 22px;list-style:disc} .article ol{list-style:decimal} .article li{margin-bottom:9px} .article img{border-radius:var(--r);margin:28px 0;box-shadow:var(--sh-2)} .article blockquote{border-left:4px solid var(--c3);margin:28px 0;font-style:italic;color:var(--ink-2); background:linear-gradient(135deg,rgba(255,77,157,.07),rgba(91,75,255,.06));border-radius:0 14px 14px 0;padding:20px 26px} .article a{color:var(--c1);font-weight:640;border-bottom:1.6px solid rgba(91,75,255,.32)} .article a:hover{border-bottom-color:var(--c1)} .article code{background:var(--bg-3);padding:2px 8px;border-radius:6px;font-size:.9em;color:var(--c1)} .article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px} .article th,.article td{padding:12px 14px;border:1px solid var(--line);text-align:left} .article th{background:var(--bg-2);font-weight:700} /* ---------------- Ekip ---------------- */ .team-card{text-align:center;padding:34px 24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line); transition:.5s var(--ease)} .team-card:hover{transform:translateY(-8px);box-shadow:var(--sh-3)} .team-photo{width:108px;height:108px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center; color:#fff;font-size:32px;font-weight:800;overflow:hidden;transition:.55s var(--ease-b)} .team-card:nth-child(4n+1) .team-photo{background:var(--grad);box-shadow:var(--sh-glow)} .team-card:nth-child(4n+2) .team-photo{background:var(--grad-warm);box-shadow:var(--sh-pink)} .team-card:nth-child(4n+3) .team-photo{background:var(--grad-cool);box-shadow:var(--sh-mint)} .team-card:nth-child(4n+4) .team-photo{background:linear-gradient(135deg,var(--c4),var(--c3));box-shadow:0 18px 46px rgba(255,176,32,.3)} .team-card:hover .team-photo{transform:scale(1.08) rotate(-5deg)} .team-photo img{width:100%;height:100%;object-fit:cover} .team-card h4{font-size:1.1rem;margin-bottom:4px} .team-card small{color:var(--c1);font-weight:640;font-size:13px} .team-card p{margin-top:12px;font-size:13.8px;color:var(--ink-3)} /* ---------------- İletişim ---------------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start} .contact-info{border-radius:var(--r-2xl);padding:46px;color:#fff;position:relative;overflow:hidden; background:var(--grad-rainbow);background-size:300% 100%;animation:hueShift 14s ease-in-out infinite; box-shadow:0 26px 64px rgba(91,75,255,.28)} .contact-info::before{content:'';pointer-events:none;position:absolute;inset:0; background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.26),transparent 52%), radial-gradient(circle at 8% 92%,rgba(0,0,0,.16),transparent 50%)} .contact-info>*{position:relative;z-index:2} .contact-info h3{color:#fff;margin-bottom:10px} .contact-info>p{color:rgba(255,255,255,.9);margin-bottom:32px;font-size:15px} .ci-item{display:flex;gap:15px;align-items:flex-start;margin-bottom:24px} .ci-item .ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.2);backdrop-filter:blur(10px); display:grid;place-items:center;flex-shrink:0;border:1px solid rgba(255,255,255,.24)} .ci-item small{display:block;font-size:12px;opacity:.82;letter-spacing:.07em;text-transform:uppercase;font-weight:640} .ci-item b{font-size:15.5px;font-weight:620;word-break:break-word} .socials{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap} .socials a{width:var(--tap);height:var(--tap);border-radius:14px;background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.26);display:grid;place-items:center;transition:.35s var(--ease-b)} .socials a:hover{background:#fff;color:var(--c1);transform:translateY(-5px) scale(1.08)} .map-embed{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1);min-height:320px} .map-embed iframe{width:100%;height:100%;min-height:320px;border:0;display:block} /* ---------------- Alt bilgi ---------------- */ .footer{background:#0B0D1A;color:#fff;padding:clamp(58px,7vw,88px) 0 0;position:relative;overflow:hidden} .footer::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 52% 42% at 10% 0%,rgba(91,75,255,.34),transparent 58%), radial-gradient(ellipse 48% 42% at 88% 14%,rgba(0,194,255,.24),transparent 56%), radial-gradient(ellipse 40% 36% at 55% 100%,rgba(255,77,157,.2),transparent 60%)} .footer .container{position:relative;z-index:2} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:52px} .footer .logo{color:#fff;margin-bottom:18px} .footer-about{color:rgba(255,255,255,.64);font-size:14.5px;max-width:340px;line-height:1.8} .footer h5{font-size:13.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;color:#fff} .footer-links li{margin-bottom:11px} .footer-links a{color:rgba(255,255,255,.62);font-size:14.5px;transition:.32s var(--ease); display:inline-flex;align-items:center;gap:8px;min-height:32px} .footer-links a:hover{color:#fff;transform:translateX(6px)} .newsletter-form{display:flex;gap:9px;margin-top:16px} .newsletter-form input{flex:1;min-height:var(--tap);padding:13px 16px;border-radius:13px; border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font-size:15px;transition:.3s} .newsletter-form input::placeholder{color:rgba(255,255,255,.42)} .newsletter-form input:focus{outline:none;border-color:var(--c2);background:rgba(255,255,255,.12)} .newsletter-form button{min-height:var(--tap);padding:13px 22px;border-radius:13px;border:none; background:var(--grad);color:#fff;font-weight:680;cursor:pointer;transition:.35s var(--ease-b);font-size:14px} .newsletter-form button:hover{transform:translateY(-2px);box-shadow:var(--sh-glow)} .footer .socials a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff} .footer .socials a:hover{background:var(--grad);border-color:transparent;color:#fff} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:26px 0;display:flex;justify-content:space-between; align-items:center;gap:20px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.52)} .footer-bottom a{color:rgba(255,255,255,.62)} .footer-bottom a:hover{color:#fff} .footer-legal{display:flex;gap:20px;flex-wrap:wrap} /* ---------------- Yüzen butonlar ---------------- */ .float-wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));width:58px;height:58px; border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center; box-shadow:0 14px 36px rgba(37,211,102,.45);z-index:800;transition:.4s var(--ease-b)} .float-wa:hover{transform:scale(1.12) translateY(-3px)} .float-wa::after{content:'';pointer-events:none;position:absolute;inset:0;border-radius:50%;border:2px solid #25D366; animation:ring 2.2s var(--ease) infinite} @keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}} .to-top{position:fixed;right:20px;bottom:calc(90px + env(safe-area-inset-bottom));width:48px;height:48px; border-radius:50%;background:#fff;color:var(--ink);border:1px solid var(--line);display:grid;place-items:center; box-shadow:var(--sh-2);z-index:800;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px) rotate(-90deg); transition:.42s var(--ease-b)} .to-top.show{opacity:1;visibility:visible;transform:rotate(-90deg)} .to-top:hover{background:var(--grad);color:#fff;border-color:transparent} /* PWA yükleme balonu */ .pwa-prompt{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:840; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px; box-shadow:var(--sh-3);max-width:340px;display:none;animation:fadeUp .5s var(--ease)} .pwa-prompt.show{display:block} .pwa-prompt b{display:block;margin-bottom:4px;font-size:14.5px} .pwa-prompt p{font-size:13px;color:var(--ink-3);margin-bottom:12px;line-height:1.6} /* ---------------- Çerez bildirimi ---------------- */ .cookie{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom));max-width:430px;background:#fff; border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-3);z-index:850; font-size:14px;color:var(--ink-2);transform:translateY(160%);transition:transform .65s var(--ease-b)} .cookie.show{transform:none} /* ---------------- Konfeti ---------------- */ .confetti-piece{position:fixed;width:9px;height:14px;z-index:1100;pointer-events:none; animation:confettiFall linear forwards} @keyframes confettiFall{ 0%{transform:translateY(-20vh) rotate(0deg);opacity:1} 100%{transform:translateY(105vh) rotate(720deg);opacity:0} } /* ---------------- Kaydırma animasyonları ---------------- */ [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)} [data-reveal].in{opacity:1;transform:none} [data-reveal="left"]{transform:translateX(-42px)} [data-reveal="right"]{transform:translateX(42px)} [data-reveal="scale"]{transform:scale(.93)} [data-reveal="flip"]{transform:perspective(900px) rotateX(14deg);transform-origin:top} [data-reveal].in{transform:none} [data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.16s} [data-delay="3"]{transition-delay:.24s}[data-delay="4"]{transition-delay:.32s} [data-delay="5"]{transition-delay:.4s}[data-delay="6"]{transition-delay:.48s} /* Eğilen (tilt) kart */ .tilt{transition:transform .18s var(--ease)} /* ---------------- Yükleniyor / rozet ---------------- */ .spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%; animation:spin .7s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} .btn.loading{pointer-events:none;opacity:.75} .badge{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:var(--r-full); font-size:12px;font-weight:660} .badge-ok{background:#E9FAF2;color:#08653A} .badge-warn{background:#FFF8E6;color:#8A6D18} .badge-bad{background:#FFEEF1;color:#A3122F} .badge-info{background:#EEF1FF;color:#2C3282} .badge-mut{background:var(--bg-3);color:var(--ink-3)} /* ---------------- Kimlik sayfaları ---------------- */ .auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr} .auth-side{padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative; overflow:hidden;color:#fff;background:var(--grad-rainbow);background-size:300% 100%; animation:hueShift 16s ease-in-out infinite} .auth-side::before{content:'';pointer-events:none;position:absolute;inset:0; background:radial-gradient(circle at 22% 16%,rgba(255,255,255,.24),transparent 46%), radial-gradient(circle at 84% 84%,rgba(0,0,0,.2),transparent 52%)} .auth-side>*{position:relative;z-index:2} .auth-side h2{color:#fff;font-size:clamp(1.7rem,2.6vw,2.5rem);margin-bottom:16px} .auth-side p{color:rgba(255,255,255,.9);font-size:1.03rem;max-width:430px} .auth-feat{margin-top:38px} .auth-feat li{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;font-size:15px;color:rgba(255,255,255,.95)} .auth-feat li i{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);display:grid; place-items:center;flex-shrink:0;font-size:13px;font-style:normal} .auth-main{display:flex;align-items:center;justify-content:center;padding:48px 32px;background:var(--bg); position:relative;overflow:hidden} .auth-main::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(91,75,255,.1),transparent 68%);top:-160px;right:-160px; animation:morph 18s ease-in-out infinite} .auth-card{width:100%;max-width:440px;position:relative;z-index:2} .auth-card h1{font-size:clamp(1.65rem,2.6vw,2.1rem);margin-bottom:8px} .auth-card .sub{color:var(--ink-3);margin-bottom:30px;font-size:15px} .auth-foot{margin-top:26px;text-align:center;font-size:14.5px;color:var(--ink-3)} .auth-foot a{color:var(--c1);font-weight:660} @media(max-width:900px){.auth-wrap{grid-template-columns:1fr}.auth-side{display:none}} /* ---------------- 404 ---------------- */ .err-page{min-height:78vh;display:grid;place-items:center;text-align:center;padding:120px 24px 80px} .err-code{font-size:clamp(6rem,18vw,12rem);font-weight:800;letter-spacing:-.06em;line-height:1; background:var(--grad-rainbow);background-size:300% 100%;animation:hueShift 6s linear infinite; -webkit-background-clip:text;background-clip:text;color:transparent} /* ---------------- Sayfalama ---------------- */ .pagination{display:flex;gap:7px;justify-content:center;margin-top:46px;flex-wrap:wrap} .pg{min-width:var(--tap);height:var(--tap);padding:0 14px;border-radius:13px;border:1px solid var(--line); background:#fff;display:grid;place-items:center;font-size:14px;font-weight:620;color:var(--ink-2); transition:.3s var(--ease-b)} .pg:hover{border-color:var(--c1);color:var(--c1);transform:translateY(-2px)} .pg.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--sh-glow)} .pg.disabled{opacity:.4;pointer-events:none} .pg.dots{border:none;background:none;pointer-events:none;min-width:24px} /* ---------------- Duyarlı ---------------- */ @media(max-width:1080px){ .footer-grid{grid-template-columns:1fr 1fr;gap:36px} .g4{grid-template-columns:repeat(2,1fr)} .counters{grid-template-columns:repeat(2,1fr)} .pf-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .nav-links{display:none} .nav-toggle{display:flex} .nav-cta .btn-ghost{display:none} .contact-grid{grid-template-columns:1fr;gap:28px} .g3{grid-template-columns:repeat(2,1fr)} } @media(max-width:680px){ :root{--nav-h:64px} .container{padding:0 18px} .g2,.g3,.g4,.pf-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:32px} .hero{min-height:auto;padding:calc(var(--nav-h) + 48px) 0 56px} .hero-stats{gap:24px 32px;margin-top:48px} .hero-stat{flex:1 1 40%} .card{padding:26px} .contact-info{padding:32px} .cta-band{padding:40px 26px} .btn{width:auto} .hero-actions .btn,.gslide-actions .btn{flex:1 1 100%} .float-wa{width:54px;height:54px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))} .to-top{right:14px;bottom:calc(78px + env(safe-area-inset-bottom));width:44px;height:44px} .cookie,.pwa-prompt{left:12px;right:12px;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom))} .footer-bottom{flex-direction:column;text-align:center} .gslider{min-height:440px;border-radius:var(--r-xl)} .gslide{padding:28px 22px 74px} .gslider-dots{left:22px;bottom:22px} .gslider-nav{display:none} .marquee-item{padding:0 16px;gap:12px} .section{padding:56px 0} .article{font-size:16.5px} } @media(max-width:400px){ .hero-stat{flex:1 1 100%} .chip span{padding:10px 15px;font-size:13px} } /* Hareket azaltma 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} [data-reveal]{opacity:1 !important;transform:none !important} .hero-orb,.sparkles{display:none} } /* Yüksek kontrast tercihi */ @media(prefers-contrast:more){ :root{--ink-3:#4A5068;--line:#C9CFE0} .btn-ghost{border-width:2px} } @media print{ .nav,.footer,.float-wa,.to-top,.cookie,.hero-orb,.scroll-progress,.pwa-prompt{display:none !important} body{background:#fff} } /* ========================================================================== ÜST BAR TAŞMA DÜZELTMESİ -------------------------------------------------------------------------- `.nav` sabit konumludur (position:fixed). Sayfaların ilk bölümü tam kaplayan bir "hero" değilse içerik barın ALTINA giriyordu ("iç içe geçme"). Çözüm: main'e her zaman bar yüksekliği kadar üst boşluk verilir; tam kaplayan hero bölümleri ise aynı miktarda yukarı çekilerek eski görünümlerini korur. ========================================================================== */ main{padding-top:var(--nav-h)} main > .hero:first-child, main > .page-hero:first-child, main > .svc-hero:first-child, main > .auth-wrap:first-child{margin-top:calc(var(--nav-h) * -1)} /* Sayfa içi çapa bağlantıları sabit barın altında kalmasın */ :target{scroll-margin-top:calc(var(--nav-h) + 20px)} [id]{scroll-margin-top:calc(var(--nav-h) + 20px)} /* Yapışkan kenar sütunları da barın altına girmesin */ .cart-summary,.cfg-summary,.sticky-card{top:calc(var(--nav-h) + 20px)} /* ========================================================================== JAVASCRIPT ARIZASINDA İÇERİK KAYBOLMASIN -------------------------------------------------------------------------- `[data-reveal]` öğeleri başlangıçta opacity:0'dır ve JS ile görünür olur. Betik yüklenmezse (CDN engeli, hata, eski tarayıcı) sayfa BOŞ görünürdü. Aşağıdaki iki koruma bunu imkânsız kılar. ========================================================================== */ /* 1) JS hiç çalışmazsa */ .no-js [data-reveal]{opacity:1!important;transform:none!important} /* 2) Hareket azaltma tercihi */ @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} } /* Grafik kapsayıcısı — SABİT yükseklik. Yüksekliği içeriğe bırakmak, tuval↔kapsayıcı arasında sonsuz büyüme döngüsü yaratıyordu; bu kural o hatayı yapısal olarak imkânsız kılar. */ .chart-box{position:relative;height:300px;width:100%;overflow:hidden} .chart-box .sg-chart-svg{display:block;width:100%;height:calc(100% - 34px)} .chart-box .sg-legend{display:flex;gap:18px;justify-content:center;align-items:center;height:34px;flex-wrap:wrap} .sg-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3,#8a90a8)} .sg-legend-item i{width:12px;height:3px;border-radius:2px;display:inline-block} .sg-legend-item i.dashed{background-image:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px)} .chart-empty{text-align:center;color:var(--ink-3,#8a90a8);padding:40px 0;margin:0} .sg-bar,.sg-line{transition:opacity .2s} .chart-box:hover .sg-bar{opacity:.92} @media (max-width:680px){.chart-box{height:260px}} /* ========================================================================== PREMIUM TEMA KATMANI — v4.2 (anasayfa · giriş · kayıt · ortak) ========================================================================== Kural: hiçbir dekoratif katman tıklamayı engellemez. Bu dosyadaki her ::before/::after kuralında pointer-events:none vardır — daha önce tam da bu yüzden düğmeler tıklanamıyordu, bir daha yaşanmasın. ------------------------------------------------------------------------ */ /* --- Giriş / kayıt: derinlik ve odak --- */ .auth-side::after{content:'';pointer-events:none;position:absolute;inset:0;z-index:1; background: radial-gradient(680px 420px at 12% 8%,rgba(255,255,255,.16),transparent 62%), radial-gradient(520px 360px at 88% 92%,rgba(255,255,255,.10),transparent 60%)} .auth-form{animation:authIn .5s var(--ease-b) both} @keyframes authIn{from{opacity:0;transform:translateY(14px)}} /* Alanlar sırayla belirir — form uzun görünmesin diye kademeli */ .auth-form .form-group{animation:authIn .46s var(--ease-b) both} .auth-form .form-group:nth-child(1){animation-delay:.05s} .auth-form .form-group:nth-child(2){animation-delay:.10s} .auth-form .form-group:nth-child(3){animation-delay:.15s} .auth-form .form-group:nth-child(4){animation-delay:.20s} /* --- Parola gücü göstergesi (kayıt) --- */ .pw-meter{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px} .pw-meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .35s var(--ease-b),background .35s} .pw-meter.w1 i{width:25%;background:#E0455F} .pw-meter.w2 i{width:50%;background:#E8A33D} .pw-meter.w3 i{width:75%;background:#3DA5E8} .pw-meter.w4 i{width:100%;background:#12A971} .pw-note{font-size:12.4px;color:var(--ink-4);margin-top:6px;min-height:17px} /* --- Odak halkası: klavye kullanıcıları için her yerde tutarlı --- */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2.5px solid var(--c1);outline-offset:3px;border-radius:6px} /* --- Kart yükselme: gölge + hafif kalkış (yalnızca fare olan cihazlarda) --- */ @media (hover:hover){ .svc-card,.pkg-card,.post-card{transition:transform .32s var(--ease-b),box-shadow .32s var(--ease-b)} .svc-card:hover,.pkg-card:hover,.post-card:hover{transform:translateY(-5px)} } /* --- Görsel yerine gelmeden düzen zıplamasın --- */ img{max-width:100%;height:auto} img[width][height]{height:auto} /* --- Seçim rengi markaya uysun --- */ ::selection{background:var(--c1);color:#fff} /* --- Bağlantı altı çizgisi: yumuşak açılış --- */ .prose a{background-image:linear-gradient(var(--c1),var(--c1));background-size:0 1.5px; background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease)} .prose a:hover{background-size:100% 1.5px} /* --- Yazdırma: panel ve gezinti çıkmasın, içerik okunur olsun --- */ @media print{ .nav,.footer,.sidebar,.topbar,.btn,.tbl-tools,.pro-toast-wrap{display:none!important} body{background:#fff;color:#000} main{padding:0!important} .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid} a[href]::after{content:" (" attr(href) ")";font-size:11px;color:#555} } /* --- Hareket azaltma tercihi: tüm animasyonlar susar --- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ========================================================================== HAREKET KATMANI — motion.js ile birlikte çalışır (v4.3) ========================================================================== Buradaki her kural iki koşula uyar: · Yalnızca transform/opacity animasyonu (yerleşim hesabı tetiklenmez) · Dekoratif katmanlar pointer-events:none (tıklama asla engellenmez) JS çalışmazsa: .motion-ready sınıfı eklenmez, aşağıdaki gizleme kuralları devreye girmez ve içerik tam görünür kalır. Animasyon bir süs katmanıdır; sitenin çalışması ona bağlı değildir. ------------------------------------------------------------------------ */ /* ---- 1) Belirme: kurallar yukarıda (satır ~715) zaten tanımlı ---- Burada YALNIZCA erişilebilirlik güvencesi eklenir: kullanıcı işletim sisteminde hareketi azaltmışsa öğeler hiç gizlenmez, anında son haliyle görünür. Bu bir tercih değil, vestibüler rahatsızlığı olan kullanıcılar için gerekliliktir. */ .motion-off [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} .motion-off [data-delay]{transition-delay:0s!important} /* ---- 3) Düğme dalgası ---- */ /* Panel dalgası kaldırıldı (bkz. motion.js §3). site.js'in kendi `.ripple` efekti satır ~160'ta duruyor ve dokunulmadı. */ /* NOT: Burada bir zamanlar `.btn > *{position:relative;z-index:1}` vardı. Düğme etiketleri çoğunlukla çıplak metin düğümüdür (`