/* tmsteknikkalip.com — HAREKET KATMANI (stil.css'in üstüne).
   Tamamı CSS. Başarısızlık yönü "göster": animasyon hiç çalışmazsa (eski
   tarayıcı, prefers-reduced-motion) içerik olduğu gibi görünür.
   🔴 Dönen plaka: ilk kare static, diğerleri absolute; gecikme NEGATİF ve eşit
   aralıklı (AGENTS.md "dönen görsel"). Şerit: iki özdeş kopya, ikincisi aria-hidden. */

/* ---------- kaydırma ilerleme çizgisi ---------- */
.ilerleme{position:fixed;top:0;left:0;right:0;height:3px;z-index:400;background:var(--mavi);transform:scaleX(0);transform-origin:left;pointer-events:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .ilerleme{animation:ilerle linear both;animation-timeline:scroll(root)}
  }
}
@keyframes ilerle{to{transform:scaleX(1)}}

@keyframes gir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes izgara-kay{to{background-position:36px 36px}}
@keyframes serit-kay2{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}}
@keyframes don{to{transform:rotate(360deg)}}
@keyframes don-ters{to{transform:rotate(-360deg)}}
@keyframes nabiz{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes parla{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes yuz{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kare-don-2{0%,43%{opacity:1}50%,93%{opacity:0}100%{opacity:1}}
@keyframes kare-don-3{0%,30%{opacity:1}33%,97%{opacity:0}100%{opacity:1}}
@keyframes kivil{0%{transform:translateY(-6px) scale(.4);opacity:0}30%{opacity:1}100%{transform:translateY(46px) scale(1);opacity:0}}
@keyframes cizgi-genis{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cizgi-uzun{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes serit-kay{to{transform:translateX(-50%)}}

.vurgu{color:#5cc5ff;position:relative;white-space:nowrap}
.vurgu::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:linear-gradient(90deg,var(--mavi),#7fd0ff,var(--mavi));background-size:200% 100%;border-radius:2px}

.kh-dis{position:absolute;z-index:0;pointer-events:none;color:#fff;opacity:.07}
.kh-dis svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;display:block}
.kh-dis-1{width:360px;height:360px;right:-90px;top:-80px}
.kh-dis-2{width:200px;height:200px;left:-60px;bottom:-70px}

.kivilcim-seridi{position:absolute;left:0;right:0;bottom:0;height:46px;z-index:1;pointer-events:none;overflow:hidden}
.kivilcim-seridi i{position:absolute;top:0;width:3px;height:14px;border-radius:2px;background:linear-gradient(#fff,var(--mavi));opacity:0}

/* ---------- rakam şeridi ---------- */
.sayilar{background:linear-gradient(90deg,var(--lacivert),#10244a);color:#fff;border-bottom:3px solid var(--mavi)}
.sayilar-ic{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:26px 0}
.sayilar-ic>div{text-align:center;padding:4px 8px;border-right:1px solid rgb(255 255 255/.14)}
.sayilar-ic>div:last-child{border-right:0}
.sayilar b{display:block;font:800 clamp(34px,5vw,54px)/1 var(--mono);color:#5cc5ff;letter-spacing:-.02em}
.sayilar span{display:block;margin-top:6px;font-size:14px;color:#d6e2f2}

/* ---------- hizmet ikon plakası ---------- */
.is-ikon{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--celik);margin-bottom:12px;transition:background .25s,transform .25s}
.is-ikon svg{width:28px;height:28px;fill:none;stroke:var(--lacivert);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.is:hover .is-ikon{background:var(--mavi);transform:rotate(-4deg) scale(1.06)}
.is:hover .is-ikon svg{stroke:#fff}
.is-no{position:absolute;right:18px;top:16px;margin:0}

/* ---------- marka şeridi ---------- */
.serit{background:#fff;border-block:1px solid var(--cizgi);padding:18px 0 20px;overflow:hidden}
.serit-baslik{margin:0 auto 12px}
.serit-ray{display:flex;width:max-content}
.serit-liste{display:flex;list-style:none;gap:0;flex:none}
.serit-liste li{padding:8px 30px;font:700 clamp(18px,2.4vw,26px)/1.2 var(--mono);color:#9aa9bd;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;position:relative}
.serit-liste li::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--mavi);transform:rotate(45deg)}

/* ---------- SEO metin bloğu / hizmet sayfası ---------- */
.seo-duzen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,4vw,56px);align-items:start}
.metin-genis{max-width:78ch}
.giris-p{font-size:18px!important}
.kunye-hizli p{color:var(--duman)}
.kunye-hizli .dugmeler{flex-direction:column;align-items:stretch}
.kunye-hizli .dugme{width:100%}

/* ---------- hareket (yalnız hareketi sevenlere) ---------- */
@media (prefers-reduced-motion:no-preference){
  .kahraman,.sayfabasi,.bolum-koyu{animation:izgara-kay 9s linear infinite}
  .kahraman::before{animation:serit-kay2 14s ease-in-out infinite alternate}
  .kh-dis-1{animation:don 60s linear infinite}
  .kh-dis-2{animation:don-ters 40s linear infinite}
  .gir{animation:gir .8s cubic-bezier(.2,.7,.2,1) both}
  .g1{animation-delay:.05s}.g2{animation-delay:.15s}.g3{animation-delay:.28s}.g4{animation-delay:.4s}
  .vurgu::after{animation:parla 3.5s linear infinite}

  /* dönen plakalar */
  .plaka.gir{animation-delay:var(--g,.3s)}
  .plaka-2 .plaka-kare img{animation:kare-don-2 10s infinite}
  .plaka-2 .plaka-kare img:nth-child(1){animation-delay:var(--of,0s)}
  .plaka-2 .plaka-kare img:nth-child(2){animation-delay:calc(-5s + var(--of,0s))}
  .plaka-3 .plaka-kare img{animation:kare-don-3 15s infinite}
  .plaka-3 .plaka-kare img:nth-child(1){animation-delay:var(--of,0s)}
  .plaka-3 .plaka-kare img:nth-child(2){animation-delay:calc(-10s + var(--of,0s))}
  .plaka-3 .plaka-kare img:nth-child(3){animation-delay:calc(-5s + var(--of,0s))}

  /* kıvılcım şeridi (erezyon hissi) */
  .kivilcim-seridi i{animation:kivil 2.4s ease-in infinite}
  .kivilcim-seridi i:nth-child(1){left:8%;animation-delay:.1s}
  .kivilcim-seridi i:nth-child(2){left:22%;animation-delay:1.1s}
  .kivilcim-seridi i:nth-child(3){left:37%;animation-delay:.6s}
  .kivilcim-seridi i:nth-child(4){left:52%;animation-delay:1.7s}
  .kivilcim-seridi i:nth-child(5){left:66%;animation-delay:.3s}
  .kivilcim-seridi i:nth-child(6){left:80%;animation-delay:1.4s}
  .kivilcim-seridi i:nth-child(7){left:93%;animation-delay:.9s}

  /* düğme parıltısı */
  .dugme-ana,.dugme-wa{background-image:linear-gradient(110deg,transparent 35%,rgb(255 255 255/.28) 50%,transparent 65%);background-size:250% 100%;background-repeat:no-repeat;background-position:-200% 0}
  .dugme-ana:hover,.dugme-wa:hover{animation:parla .9s ease-out 1}
  .yuzen a{animation:yuz 5s ease-in-out infinite}
  .yuzen a:nth-child(2){animation-delay:.6s}
  .yuzen a:nth-child(3){animation-delay:1.2s}

  /* kart ikonları canlanır */
  .is:hover .ik-cnc svg .dis,.is:hover .ik-parca svg .dis{animation:don 2.4s linear infinite;transform-origin:12px 12px}
  .ik-tel svg .kivilcim,.ik-dalma svg .kivilcim,.ik-lazer svg .kivilcim{animation:nabiz 1.1s ease-in-out infinite}
  .is:hover .ik-sac svg,.is:hover .ik-kalip svg,.is:hover .ik-makina svg{animation:yuz 1s ease-in-out infinite}

  /* süreç çizgisi kaydırınca çizilir */
  @supports (animation-timeline:view()){
    .surec::before{transform-origin:left;animation:cizgi-genis linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    .surec-dikey::before{transform-origin:top;animation-name:cizgi-uzun}
  }

  /* marka şeridi */
  .serit-ray{animation:serit-kay 38s linear infinite}
  .serit:hover .serit-ray{animation-play-state:paused}
}

/* reduced-motion: şerit SARAR, kesilmez (içeriğin yarısı ekran dışında kalmasın) */
@media (prefers-reduced-motion:reduce){
  .serit-ray{width:auto;flex-wrap:wrap}
  .serit-liste[aria-hidden="true"]{display:none}
  .serit-liste{flex-wrap:wrap;justify-content:center}
}

@media (max-width:860px){.seo-duzen{grid-template-columns:1fr}}
@media (max-width:600px){
  .sayilar-ic{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .sayilar-ic>div:nth-child(2){border-right:0}
  .plaka-et{font-size:10px;min-height:34px}
  .kh-dis-1{width:240px;height:240px}
}