/* Teknikmat efekt seti — Magic UI / Cult UI esinli, bağımlılıksız (WordPress/Elementor, stüdyo, app). MIT esinli, kod bize özgü. */
:root{--tm-teal:#17b087;--tm-teal-l:#3fe0b0;--tm-gold:#f4c94e;--tm-bg:#0a0e13}
.tm-shimmer{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.95em 1.8em;border:0;border-radius:999px;cursor:pointer;font:800 15px/1 Manrope,system-ui,sans-serif;color:#062018;background:linear-gradient(120deg,var(--tm-teal-l),var(--tm-teal));box-shadow:0 8px 30px rgba(23,176,135,.35);transition:transform .2s}
.tm-shimmer:hover{transform:translateY(-2px) scale(1.02)}
.tm-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-120%);animation:tmShimmer 3.2s ease-in-out infinite}
@keyframes tmShimmer{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.tm-pulse{animation:tmPulse 2s ease-out infinite}
@keyframes tmPulse{0%{box-shadow:0 0 0 0 rgba(63,224,176,.55)}100%{box-shadow:0 0 0 18px rgba(63,224,176,0)}}
@property --tm-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.tm-beam{position:relative;border-radius:16px}
.tm-beam::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--tm-angle),transparent 0 70%,var(--tm-teal-l) 85%,var(--tm-gold) 95%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:tmSpin 4s linear infinite;pointer-events:none}
@keyframes tmSpin{to{--tm-angle:360deg}}
.tm-marquee{overflow:hidden;display:flex;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tm-marquee>.tm-track{display:flex;gap:3rem;flex-shrink:0;min-width:100%;justify-content:space-around;animation:tmMarquee 28s linear infinite}
.tm-marquee:hover>.tm-track{animation-play-state:paused}
@keyframes tmMarquee{to{transform:translateX(calc(-100% - 3rem))}}
.tm-gradient-text{background:linear-gradient(90deg,var(--tm-teal-l),var(--tm-gold),var(--tm-teal-l));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tmGrad 5s linear infinite}
@keyframes tmGrad{to{background-position:200% 0}}
.tm-reveal{opacity:0;transform:translateY(14px);filter:blur(5px);transition:opacity .7s,transform .7s cubic-bezier(.22,1,.36,1),filter .7s}
.tm-reveal.tm-in{opacity:1;transform:none;filter:none}
.tm-float{animation:tmFloat 6s ease-in-out infinite}
@keyframes tmFloat{50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.tm-shimmer::after,.tm-pulse,.tm-beam::before,.tm-marquee>.tm-track,.tm-gradient-text,.tm-float{animation:none}.tm-reveal{opacity:1;transform:none;filter:none}}

/* ---- Animata esinli ek efektler ---- */
/* Hareketli gradyan zemin (moving-gradient / aurora) */
.tm-aurora{position:relative;overflow:hidden;background:#0a0e13}
.tm-aurora::before{content:"";position:absolute;inset:-30%;background:radial-gradient(40% 40% at 25% 30%,rgba(23,176,135,.55),transparent 70%),radial-gradient(35% 35% at 75% 60%,rgba(63,224,176,.35),transparent 70%),radial-gradient(30% 30% at 55% 15%,rgba(244,201,78,.22),transparent 70%);animation:tmAurora 16s ease-in-out infinite alternate;filter:blur(30px)}
@keyframes tmAurora{to{transform:translate(8%,6%) rotate(12deg) scale(1.1)}}
.tm-aurora>*{position:relative}
/* Yıldız kayması (shooting-stars, yalnızca CSS) */
.tm-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tm-stars i{position:absolute;top:-10%;width:2px;height:90px;border-radius:2px;background:linear-gradient(to bottom,transparent,#fff);transform:rotate(-35deg);opacity:0;animation:tmStar 3.4s linear infinite}
.tm-stars i:nth-child(1){left:12%;animation-delay:.2s}.tm-stars i:nth-child(2){left:34%;animation-delay:1.4s}.tm-stars i:nth-child(3){left:58%;animation-delay:2.2s}.tm-stars i:nth-child(4){left:80%;animation-delay:.9s}.tm-stars i:nth-child(5){left:93%;animation-delay:2.8s}
@keyframes tmStar{0%{opacity:0;translate:0 0}10%{opacity:1}60%{opacity:0;translate:-340px 560px}100%{opacity:0;translate:-340px 560px}}
/* Halka / ilerleme (ring-chart): <svg class="tm-ring" style="--p:.72"> + circle.tm-ring-fill */
.tm-ring-fill{stroke-dasharray:100;stroke-dashoffset:100;animation:tmRing 1.4s cubic-bezier(.22,1,.36,1) .2s forwards}
@keyframes tmRing{to{stroke-dashoffset:calc(100 - 100*var(--p,1))}}
/* Zaman çizgisi (animated-timeline) — "4 adımda başla" */
.tm-steps{position:relative;display:grid;gap:28px;padding-left:34px;counter-reset:s}
.tm-steps::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--tm-teal-l) var(--tm-fill,0%),#212a34 0)}
.tm-steps>li{list-style:none;position:relative;counter-increment:s}
.tm-steps>li::before{content:counter(s);position:absolute;left:-34px;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 12px Manrope,sans-serif;background:#11161d;color:var(--tm-teal-l);box-shadow:0 0 0 2px #212a34;transition:.4s}
.tm-steps>li.tm-in::before{background:var(--tm-teal-l);color:#062018;box-shadow:0 0 0 4px rgba(63,224,176,.25)}
/* 3B eğilme kartı (flip/tilt) */
.tm-flip{perspective:900px}.tm-flip>div{transition:transform .7s;transform-style:preserve-3d}.tm-flip:hover>div{transform:rotateY(180deg)}
.tm-flip .tm-back{position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg)}.tm-flip .tm-front{backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){.tm-aurora::before,.tm-stars i,.tm-ring-fill{animation:none}.tm-ring-fill{stroke-dashoffset:calc(100 - 100*var(--p,1))}}