@charset "utf-8";
/* ==========================================================================
   GARAGE342 — Hareket katmani (Faz: vitrin canlandirma)
   vitrin.css'e EK, onu degistirmez. Butun ozel ozellikler --py/--oran/--dx/
   --dy/--rx/--ry/--uzunluk uzerinden hareket.js tarafindan yazilir; JS
   calismazsa (devre disi, hata, prefers-reduced-motion) degiskenler bos
   kalir ve asagidaki var(...,FALLBACK) degerleri sayfayi duz/dogru gosterir.
   Harici kutuphane yok, kesik kose kurali gecerli: border-radius hicbir yerde
   ezilmez (miras zaten 0).
   ========================================================================== */

/* ---------- 1. Parallax: data-parallax="oran" -> --py ------------------- */

[data-parallax] {
  transform: translateY(var(--py, 0px));
  will-change: auto;
}

[data-parallax].hareket-aktif {
  will-change: transform;
}

/* ---------- 2. Cizgi/oran dolumu: data-cizgi -> --oran ------------------ */

/* "07 — Nasil calisir" adim izgarasi: ustte ince bir dolum cizgisi, her
   adimin numarasi sirayla kirmizilasir. clamp() ile taklit basamak islevi:
   esik asilana kadar negatif kalip 0'da kirpilir, asilinca buyuk pozitif
   olup 1'de kirpilir — boylece JS'e ek mantik yazmadan "sirayla yanma"
   elde edilir. */
.izgara--3[data-cizgi] {
  position: relative;
}

.izgara--3[data-cizgi]::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  height: 2px;
  width: 100%;
  background: var(--line);
  pointer-events: none;
}

.izgara--3[data-cizgi]::after {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(var(--oran, 0));
  transform-origin: left;
  pointer-events: none;
}

.izgara--3[data-cizgi] .adim:nth-child(1) p.adim__no { --esik: 0.02; }
.izgara--3[data-cizgi] .adim:nth-child(2) p.adim__no { --esik: 0.2; }
.izgara--3[data-cizgi] .adim:nth-child(3) p.adim__no { --esik: 0.38; }
.izgara--3[data-cizgi] .adim:nth-child(4) p.adim__no { --esik: 0.56; }
.izgara--3[data-cizgi] .adim:nth-child(5) p.adim__no { --esik: 0.74; }
.izgara--3[data-cizgi] .adim:nth-child(6) p.adim__no { --esik: 0.92; }

.izgara--3[data-cizgi] .adim p.adim__no {
  transition: -webkit-text-stroke-color .3s ease;
  -webkit-text-stroke-color: color-mix(in srgb, var(--red) calc(clamp(0, (var(--oran, 0) - var(--esik, 1)) * 999, 1) * 100%), var(--line));
}

/* ---------- 3. Doku suruklenmesi: data-doku="kay" -> --dx / --dy -------- */

[data-doku]::before {
  background-position: var(--dx, 0px) var(--dy, 0px);
}

/* ---------- 4. Hero: aktif slaytta agir cekim yakinlasma (Ken Burns) ---- */

html.js .slayt__foto img {
  transform: scale(1.06);
  transform-origin: 55% 45%;
}

html.js .slayt.aktif .slayt__foto img {
  animation: hareketKenBurns 7s ease-out both;
}

@keyframes hareketKenBurns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ---------- 5. Mikro etiketin kirmizi cizgisi kendini cizer ------------- */
/* Yalniz data-cizim-hat isaretli .mikro'lar etkilenir; sayfanin geri kalani
   (diger sablonlar) dokunulmadan kalir. */

html.js [data-cizim-hat]::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1) .15s;
}

html.js .bas.gorundu [data-cizim-hat]::before,
html.js .slayt.aktif [data-cizim-hat]::before {
  transform: scaleX(1);
}

/* ---------- 6. Hizmet kartlari (02): ikon kendini cizer (hover) --------- */

[data-cizim] svg path {
  stroke-dasharray: var(--uzunluk, none);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .1s linear;
}

.kart:hover [data-cizim] svg path,
.kart:focus-within [data-cizim] svg path {
  animation: hareketIkonCizim .55s ease both;
}

@keyframes hareketIkonCizim {
  from { stroke-dashoffset: var(--uzunluk, 0); }
  to   { stroke-dashoffset: 0; }
}

/* ---------- 7. "Ucuz kaplama pahaliya patlar" (05): kose isaretleri ----- */

.hareket-kose {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--red);
  border-style: solid;
  border-width: 0;
  opacity: .55;
  pointer-events: none;
  animation: hareketNabiz 3.2s ease-in-out infinite;
}

.hareket-kose--sol-ust   { top: 0;    left: 0;    border-width: 2px 0 0 2px; }
.hareket-kose--sag-ust   { top: 0;    right: 0;   border-width: 2px 2px 0 0; animation-delay: .5s; }
.hareket-kose--sol-alt   { bottom: 0; left: 0;    border-width: 0 0 2px 2px; animation-delay: 1s; }
.hareket-kose--sag-alt   { bottom: 0; right: 0;   border-width: 0 2px 2px 0; animation-delay: 1.5s; }

@keyframes hareketNabiz {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.12); }
}

/* ---------- 8. Malzeme seridi (08): ikinci ince cetvel, ters yon -------- */

.hareket-cetvel {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-bottom: 1px solid var(--line);
  opacity: .6;
}

.hareket-cetvel__ic {
  display: flex;
  width: max-content;
  height: 100%;
  background-image: repeating-linear-gradient(to right, var(--centik) 0 1px, transparent 1px 18px);
  background-repeat: repeat-x;
  animation: hareketCetvelKay 46s linear infinite;
}

.hareket-cetvel__ic span { display: block; width: 50vw; min-width: 720px; height: 100%; flex: none; }

@keyframes hareketCetvelKay {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ---------- 9. "Binekten filoya" (09): suzulen arac siluetleri ---------- */

.hareket-araclar {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
}

.hareket-arac {
  position: absolute;
  fill: currentColor;
  color: var(--line);
}

.hareket-arac--1 { top: 12%;  left: -20%; width: 160px; animation: hareketSuzul 34s linear infinite; }
.hareket-arac--2 { top: 46%;  left: -20%; width: 120px; animation: hareketSuzul 26s linear infinite 6s; opacity: .7; }
.hareket-arac--3 { top: 74%;  left: -20%; width: 190px; animation: hareketSuzul 42s linear infinite 14s; }

@keyframes hareketSuzul {
  from { transform: translateX(0); }
  to   { transform: translateX(560px); }
}

/* ---------- 10. Hizmet bolgeleri (11): noktalar sirayla yanar ----------- */

.bolge-liste .bolge:nth-child(1)  { --sira: 0; }
.bolge-liste .bolge:nth-child(2)  { --sira: 1; }
.bolge-liste .bolge:nth-child(3)  { --sira: 2; }
.bolge-liste .bolge:nth-child(4)  { --sira: 3; }
.bolge-liste .bolge:nth-child(5)  { --sira: 4; }
.bolge-liste .bolge:nth-child(6)  { --sira: 5; }
.bolge-liste .bolge:nth-child(7)  { --sira: 6; }
.bolge-liste .bolge:nth-child(8)  { --sira: 7; }
.bolge-liste .bolge:nth-child(9)  { --sira: 8; }
.bolge-liste .bolge:nth-child(10) { --sira: 9; }
.bolge-liste .bolge:nth-child(11) { --sira: 10; }
.bolge-liste .bolge:nth-child(12) { --sira: 11; }
.bolge-liste .bolge:nth-child(13) { --sira: 12; }
.bolge-liste .bolge:nth-child(14) { --sira: 13; }

html.js .bolge-liste .bolge svg {
  transition: color .35s ease, filter .35s ease;
  transition-delay: calc(var(--sira, 0) * 55ms);
}

html.js [data-sirali]:not(.gorundu) .bolge svg {
  color: var(--dim);
}

html.js [data-sirali].gorundu .bolge svg {
  color: var(--red);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--red) 55%, transparent));
}

/* ---------- 11. Instagram karesi (12): imlece gore hafif 3B egim -------- */

[data-tilt] {
  transform: perspective(700px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform .18s ease;
}

/* ---------- 12. 342 filigrani + arti isareti: ters yonlu mikro-parallax - */
/* .alt__motif kabuk_alt.php'de; isaretlemeye dokunmadan hareket.js sinif
   adiyla secip ayni --py degiskenini yaziyor. */

.alt__motif {
  transform: translateY(var(--py, 0px));
}

/* ---------- 13. Hareket azaltma: her sey duragan ve DOGRU gorunur ------- */

@media (prefers-reduced-motion: reduce) {
  [data-parallax],
  .alt__motif {
    transform: none !important;
  }

  .izgara--3[data-cizgi]::after { transform: scaleX(1) !important; }

  html.js .slayt__foto img,
  html.js .slayt.aktif .slayt__foto img {
    animation: none !important;
    transform: none !important;
  }

  html.js [data-cizim-hat]::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .kart:hover [data-cizim] svg path,
  .kart:focus-within [data-cizim] svg path { animation: none !important; }

  .hareket-kose { animation: none !important; opacity: .45 !important; }
  .hareket-cetvel__ic { animation: none !important; }
  .hareket-arac { animation: none !important; }

  [data-tilt] { transform: none !important; }
}