/* ==========================================================================
   Vitrin "Parçalar" görünümü: GERÇEK ürün fotoğrafı parçalara ayrılır (tur 5 foto-parca, 11.11.2026).
   Kaynak: site/sahne/vitrin/foto.css (bu dosya) + foto.mjs fotoStili() geometri kuralları → /varlik/stil/vitrin-foto.css
   (derleyici üretir; yalnız ana sayfada). İşaretleme: foto.mjs fotoParcaHtml(); betik: site/betik/vitrin.js.

   Katmanlar (.vtf__kap içinde, fotoğrafın kırpılmış bölgesi kadar):
     .vtf__zemin          fotoğrafın tamamı (kenarları sahneye söner); gövde ve sabit parçalar bunun üstünde kalır
     .vtf__p::before      yuva: parçanın poligonu, "Parçalar"da gölgelenir (parça yerinden kalkmış gibi)
     .vtf__p > .vtf__m    parçanın kopyası (img clip-path) + yumuşak gölge; "Parçalar"da --x/--y kadar kayar
     .vtf__h              iç parçanın kesikli halkası (yalnız yer; iç görünüm çizilmez)
     .vtf__e              numara + kısa ad (dar ekranda yalnız numara; adlar bilgi sütunundaki listede)
   Hareket: yalnız transform ve opacity (clip-path canlandırılmaz). Betiksiz ve hareket azaltmada parçalar ayrılmış
   hâlde durur; .vt--canli altında betik data-evre ile toplar/ayırır.
   ========================================================================== */
.vtf {
  --k: 1; /* kayma ölçeği: dar ekranda kısalır */
  position: absolute;
  inset: 0;
  z-index: 2;
  container-type: size;
  pointer-events: none;
}
.vtf__kap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(var(--vtf-azami, 640px), 88cqw, calc(84cqh * var(--vtf-oran, 1)));
  aspect-ratio: var(--vtf-oran, 1);
  transform: translate(-50%, -50%);
}
.vtf__zemin,
.vtf__p,
.vtf__m {
  position: absolute;
  inset: 0;
}
.vtf__kap img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}
/* Fotoğrafın tamamı: kırpma kutusu dışına taşmaz, kenarları sahneye söner (stüdyo fonu kutu gibi durmasın) */
.vtf__zemin {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--vtf-sol, 12%), #000 var(--vtf-sag, 88%), transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--vtf-ust, 10%), #000 var(--vtf-alt, 90%), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--vtf-sol, 12%), #000 var(--vtf-sag, 88%), transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--vtf-ust, 10%), #000 var(--vtf-alt, 90%), transparent 100%);
  mask-composite: intersect;
}
/* Yuva: parçanın çıktığı yer gölgede kalır (yerinden kalkmış parçanın boşluğu; poligon foto.mjs'ten) */
.vtf__p::before {
  content: '';
  position: absolute;
  background: color-mix(in srgb, var(--color-text-heading) 56%, transparent);
}
/* Kesilen parça: gölge kesimin dışında kalsın diye kapta (clip-path gölgeyi de keser) */
.vtf__m {
  filter: drop-shadow(0 0 0.6px color-mix(in srgb, var(--color-text-heading) 55%, transparent)) drop-shadow(0 10px 12px color-mix(in srgb, var(--color-text-heading) 26%, transparent));
}
.vtf__m,
.vtf__e {
  transform: translate(calc(var(--x, 0px) * var(--k)), calc(var(--y, 0px) * var(--k)));
}

/* İç parça: yalnız yeri (kesikli halka) */
.vtf__h {
  position: absolute;
  aspect-ratio: 1;
  border: 2px dashed var(--ana-rozet-metin);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ana-sahne) 30%, transparent);
  translate: -50% -50%;
}

/* Etiket: numara noktanın üstünde; ad yanında (yön: --sag / --sol) */
.vtf__e {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -13px 0 0 -13px;
  color: var(--ana-murekkep);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.vtf__e--sol {
  flex-direction: row-reverse;
  translate: calc(-100% + 26px) 0;
}
.vtf__e b {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ana-rozet-metin);
  border-radius: 50%;
  background: var(--ana-sahne);
  color: var(--ana-rozet-metin);
  font-size: 13px;
  font-weight: 700;
}
.vtf__e--ic b {
  border-style: dashed;
}
.vtf__e > span {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ana-sahne) 90%, transparent);
  box-shadow: 0 1px 6px -2px color-mix(in srgb, var(--color-text-heading) 30%, transparent);
}
.vtf__e i {
  margin-left: 2px;
  padding-left: 7px;
  border-left: 1px solid var(--ana-cizgi-bant, currentColor);
  color: var(--color-text-secondary);
  font-style: normal;
  font-weight: 500;
}

/* --- Görünümler (betikle): "Parçalar"da açılır, diğerlerinde toplu ve gizli --- */
.vt--canli .vtf {
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.vt--canli [data-evre='parca'] .vtf {
  opacity: 1;
}
.vt--canli .vtf__m,
.vt--canli .vtf__e {
  transform: translate(0, 0);
  transition:
    transform 820ms var(--ease-auar) var(--g, 0ms),
    opacity 320ms var(--ease-out);
}
.vt--canli [data-evre='parca'] .vtf__m,
.vt--canli [data-evre='parca'] .vtf__e {
  transform: translate(calc(var(--x, 0px) * var(--k)), calc(var(--y, 0px) * var(--k)));
}
.vt--canli .vtf__p::before,
.vt--canli .vtf__e,
.vt--canli .vtf__h {
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.vt--canli [data-evre='parca'] .vtf__p::before {
  opacity: 1;
  transition-delay: 200ms;
}
.vt--canli [data-evre='parca'] .vtf__e,
.vt--canli [data-evre='parca'] .vtf__h {
  opacity: 1;
  transition:
    transform 820ms var(--ease-auar) var(--g, 0ms),
    opacity 360ms var(--ease-out) 560ms;
}
/* Kesit çizimi seçiliyken fotoğraf parçaları gizli (çizim .vt__cizim'de) */
.vt--canli .vt__slayt[data-gorunum='kesit'] .vtf {
  opacity: 0;
}

/* Parça vurgusu (zaman çizelgesi ya da listede seçim/odak): seçili parça tam, diğerleri soluk */
.vt--canli [data-evre='parca'] .vtf[data-odak] .vtf__p:not(.vt-etkin) .vtf__m,
.vt--canli [data-evre='parca'] .vtf[data-odak] .vtf__e:not(.vt-etkin),
.vt--canli [data-evre='parca'] .vtf[data-odak] .vtf__h:not(.vt-etkin) {
  opacity: 0.38;
  transition-delay: 0s;
}
.vtf__e.vt-etkin b {
  background: var(--ana-rozet-metin);
  color: var(--ana-sahne);
}
.vtf__h.vt-etkin {
  border-style: solid;
  background: color-mix(in srgb, var(--ana-rozet-metin) 16%, transparent);
}

/* Hareket azaltma: geçiş yok, parçalar ayrılmış hâlde */
.vt--durgun .vtf__m,
.vt--durgun .vtf__e,
.vt--durgun .vtf__p::before {
  transition: none;
}

/* Dar ekran: kayma kısa, yalnız numaralar (adlar ve işlevler sahnenin altındaki numaralı listede) */
@media (max-width: 639px) {
  .vtf {
    --k: 0.55;
  }
  .vtf__kap {
    width: min(var(--vtf-azami, 640px), 90cqw, calc(80cqh * var(--vtf-oran, 1)));
  }
  .vtf__e {
    margin: -12px 0 0 -12px;
  }
  .vtf__e > span {
    display: none;
  }
  .vtf__e--sol {
    translate: none;
  }
  .vtf__e b {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}
/* Makine geometrisi: site/sahne/vitrin/foto.mjs (FOTO) */
.vtf--pm450{--vtf-oran:0.8632;--vtf-azami:660px;--vtf-sol:11.585%;--vtf-sag:87.317%;--vtf-ust:7.368%;--vtf-alt:93.474%}
.vtf--pm450 .vtf__kap img,.vtf--pm450 .vtf__p::before{width:121.951%;left:-9.756%;top:-3.158%;aspect-ratio:700/700}
.vtf--pm450 .vtf__p.vtf__k--hazne::before,.vtf--pm450 .vtf__k--hazne .vtf__m img{clip-path:polygon(58.7% 18.2%,58.4% 19.6%,57.6% 21%,56.2% 22.4%,54.2% 23.6%,51.8% 24.6%,49.1% 25.4%,46.1% 26%,43% 26.3%,39.8% 26.3%,36.8% 26.1%,34% 25.5%,31.5% 24.8%,29.4% 23.8%,27.9% 22.6%,26.9% 21.3%,26.5% 19.9%,26.8% 18.5%,27.6% 17.1%,29% 15.7%,31% 14.5%,33.4% 13.5%,36.1% 12.7%,39.1% 12.1%,42.2% 11.8%,45.4% 11.8%,48.4% 12%,51.2% 12.6%,53.7% 13.3%,55.8% 14.3%,57.3% 15.5%,58.3% 16.8%)}
.vtf--pm450 .vtf__k--hazne{--x:0px;--y:-28px;--g:0ms}
.vtf--pm450 .vtf__e.vtf__k--hazne{left:62.805%;top:9.474%}
.vtf--pm450 .vtf__h--hucre{left:34.146%;top:38.947%;width:12.683%}
.vtf--pm450 .vtf__e.vtf__k--hucre{left:27.439%;top:34.211%}
.vtf--pm450 .vtf__h--tarti{left:31.098%;top:54.737%;width:10.244%}
.vtf--pm450 .vtf__e.vtf__k--tarti{left:25%;top:54.737%}
.vtf--pm450 .vtf__h--sicaklik{left:22.561%;top:45.263%;width:7.805%}
.vtf--pm450 .vtf__e.vtf__k--sicaklik{left:17.805%;top:44.737%}
.vtf--pm450 .vtf__p.vtf__k--ekran::before,.vtf--pm450 .vtf__k--ekran .vtf__m img{clip-path:polygon(37% 31.3%,67.8% 23.3%,68.6% 23.6%,79.4% 47.6%,79% 48.9%,48.6% 58.8%,47.8% 58.6%)}
.vtf--pm450 .vtf__k--ekran{--x:24px;--y:12px;--g:200ms}
.vtf--pm450 .vtf__e.vtf__k--ekran{left:88.415%;top:40%}
.vtf--pm450 .vtf__e.vtf__k--govde{left:15.122%;top:70.526%}
.vtf--wsz{--vtf-oran:1.3462;--vtf-azami:402px;--vtf-sol:5%;--vtf-sag:95%;--vtf-ust:5%;--vtf-alt:94%}
.vtf--wsz .vtf__kap img,.vtf--wsz .vtf__p::before{width:100%;left:0%;top:0%;aspect-ratio:350/260}
.vtf--wsz .vtf__e.vtf__k--ust{left:9.5%;top:27.5%}
.vtf--wsz .vtf__p.vtf__k--alt::before,.vtf--wsz .vtf__k--alt .vtf__m img{clip-path:polygon(5.4% 43%,6% 41.8%,7.6% 41.3%,15% 45%,25% 51.4%,28% 53.4%,34% 57%,45% 63.4%,55% 69.6%,62% 74.4%,66% 79.4%,68.8% 83%,68.8% 92.6%,66.6% 93.6%,60% 88.8%,47.6% 79.6%,47.4% 82.6%,45.6% 84%,43.2% 83.8%,42.2% 81.6%,42.2% 77.2%,25.2% 62%,25% 65.6%,23.2% 66.8%,21% 66.4%,20.4% 64.2%,20.4% 58.6%,15% 52.6%,6.2% 45.6%,5.4% 44.6%)}
.vtf--wsz .vtf__k--alt{--x:-12px;--y:14px;--g:50ms}
.vtf--wsz .vtf__e.vtf__k--alt{left:11%;top:55%}
.vtf--wsz .vtf__p.vtf__k--kol::before,.vtf--wsz .vtf__k--kol .vtf__m img{clip-path:polygon(56% 33.4%,60% 29.5%,70% 19.7%,75% 16%,75.6% 13%,78.5% 11.6%,80.2% 10.6%,81.6% 14.6%,82.4% 19.4%,80% 21.6%,75% 27%,70% 31.7%,65% 35.8%,60.6% 39.2%,60.2% 41.4%,60.6% 44.4%,70% 40.2%,76% 38.4%,78.8% 38.6%,80.8% 40.2%,80.8% 46.2%,79.6% 47.6%,74% 50.8%,66% 53%,61.8% 52.6%,60.2% 50.8%,58.8% 47.6%,58.6% 43%,57.6% 38.6%,56.2% 36.6%)}
.vtf--wsz .vtf__k--kol{--x:14px;--y:-11px;--g:100ms}
.vtf--wsz .vtf__e.vtf__k--kol{left:83.5%;top:24%}
.vtf--wsz .vtf__p.vtf__k--kablo::before,.vtf--wsz .vtf__k--kablo .vtf__m img{clip-path:polygon(80.2% 10.6%,82.4% 9.3%,86% 7.6%,89.5% 6.2%,91.8% 6.6%,96% 6.8%,100% 7.6%,100% 12.4%,96% 11.4%,92% 10.6%,88% 12.4%,84% 15.6%,82.4% 17.4%,81.6% 14.6%)}
.vtf--wsz .vtf__k--kablo{--x:24px;--y:-18px;--g:200ms}
.vtf--wsz .vtf__e.vtf__k--kablo{left:92%;top:15%}
.vtf--frb{--vtf-oran:2.1304;--vtf-azami:902px;--vtf-sol:5%;--vtf-sag:95%;--vtf-ust:11.304%;--vtf-alt:88.478%}
.vtf--frb .vtf__kap img,.vtf--frb .vtf__p::before{width:102.041%;left:-1.02%;top:-58.696%;aspect-ratio:800/800}
.vtf--frb .vtf__e.vtf__k--bant{left:25.918%;top:40.435%}
.vtf--frb .vtf__h--isitma{left:62.755%;top:41.304%;width:5.306%}
.vtf--frb .vtf__e.vtf__k--isitma{left:62.755%;top:31.304%}
.vtf--frb .vtf__h--sogutma{left:50%;top:41.304%;width:5.306%}
.vtf--frb .vtf__e.vtf__k--sogutma{left:50%;top:52.174%}
.vtf--frb .vtf__h--kabartma{left:37.755%;top:42.174%;width:5.306%}
.vtf--frb .vtf__e.vtf__k--kabartma{left:37.755%;top:31.304%}
.vtf--frb .vtf__p.vtf__k--konveyor::before,.vtf--frb .vtf__k--konveyor .vtf__m img{clip-path:polygon(5.2% 50.6%,6.8% 49.6%,8.4% 49.1%,10.5% 48.2%,13% 47.6%,26.6% 47.5%,27.2% 48%,41.4% 48%,41.8% 48.5%,46% 48.5%,46.4% 48%,70.8% 48.1%,71.4% 49.1%,72.5% 49.5%,75.4% 49.5%,76.6% 49.5%,81.8% 49.6%,94.6% 49.6%,95.2% 50.2%,95.2% 52.6%,90% 53.4%,89.8% 57.8%,88.4% 57.8%,85.4% 58.8%,85.4% 60.4%,68% 60.4%,68% 62.1%,55% 61.5%,30% 61.3%,22.2% 60.8%,22.2% 60.4%,16.4% 60.4%,16.4% 58.6%,6% 56.2%,4.8% 55%,4.6% 51%)}
.vtf--frb .vtf__k--konveyor{--x:0px;--y:16px;--g:200ms}
.vtf--frb .vtf__e.vtf__k--konveyor{left:8.163%;top:66.304%}
.vtf--frb .vtf__p.vtf__k--kapak::before,.vtf--frb .vtf__k--kapak .vtf__m img{clip-path:polygon(26.8% 37%,27.3% 35.9%,28.2% 35.2%,35.6% 35.2%,35.4% 32.8%,36.4% 32.3%,37.7% 32.3%,38.5% 32.8%,38.4% 34%,37.4% 34.4%,37.4% 35.2%,54.4% 35.2%,54.4% 37.2%,79.6% 37.2%,80.8% 37.6%,81.6% 38.8%,81.6% 42.8%,76.4% 42.9%,75.8% 43.4%,29% 43.4%,28.9% 42%,28.4% 41%,27.6% 40.5%,26.8% 40.5%)}
.vtf--frb .vtf__k--kapak{--x:0px;--y:-18px;--g:250ms}
.vtf--frb .vtf__e.vtf__k--kapak{left:26.122%;top:20.652%}
.vtf--frb .vtf__p.vtf__k--kumanda::before,.vtf--frb .vtf__k--kumanda .vtf__m img{clip-path:polygon(54.4% 37.2%,54.4% 35.4%,55.6% 35%,55.6% 34%,56.6% 33.5%,59.2% 33.5%,60% 34.2%,60% 35%,61.2% 34.9%,61.4% 34.6%,63.8% 34.6%,64.2% 34.9%,64.4% 33.8%,65% 33.5%,66.8% 33.5%,67.2% 34%,67.4% 34.6%,70% 34.6%,70.2% 34.9%,78.6% 34.9%,79.6% 35.8%,80.4% 36.6%,80% 37.2%)}
.vtf--frb .vtf__k--kumanda{--x:0px;--y:-32px;--g:300ms}
.vtf--frb .vtf__e.vtf__k--kumanda{left:81.122%;top:17.391%}
.vtf--frb .vtf__p.vtf__k--ayak::before,.vtf--frb .vtf__k--ayak .vtf__m img{clip-path:polygon(16.3% 60.4%,16.3% 62.3%,19% 62.3%,19% 64.8%,21.9% 64.8%,21.9% 61.6%,22.4% 61%,22.4% 60.4%,68.4% 60.4%,68.4% 64.6%,69.9% 64.8%,69.9% 67.6%,73.2% 67.6%,73.2% 64.6%,72% 64.4%,71.9% 62.8%,73.5% 62.6%,73.6% 63.9%,76.4% 63.9%,78.8% 64%,79% 62.4%,81.4% 62.2%,81.4% 60.4%)}
.vtf--frb .vtf__k--ayak{--x:0px;--y:26px;--g:350ms}
.vtf--frb .vtf__e.vtf__k--ayak{left:22.449%;top:80.435%}
.vtf--np7a{--vtf-oran:1.04;--vtf-azami:628px;--vtf-sol:8.974%;--vtf-sag:90.385%;--vtf-ust:5%;--vtf-alt:93%}
.vtf--np7a .vtf__kap img,.vtf--np7a .vtf__p::before{width:128.205%;left:-10.256%;top:0%;aspect-ratio:700/525}
.vtf--np7a .vtf__p.vtf__k--tutamak::before,.vtf--np7a .vtf__k--tutamak .vtf__m img{clip-path:polygon(50% 27.6%,50% 10.4%,50.6% 8.6%,52% 8.2%,69% 8.2%,70.3% 9.4%,70.8% 11%,70.8% 28.4%,65.2% 28.4%,65.2% 26%,62.8% 25%,62.8% 22%,64% 21%,64.4% 19.6%,63% 18%,54.6% 17.9%,54.4% 24%,55.8% 24.2%,55.8% 27.6%)}
.vtf--np7a .vtf__k--tutamak{--x:0px;--y:-20px;--g:0ms}
.vtf--np7a .vtf__e.vtf__k--tutamak{left:81.538%;top:13%}
.vtf--np7a .vtf__p.vtf__k--motor::before,.vtf--np7a .vtf__k--motor .vtf__m img{clip-path:polygon(66.6% 39%,67.6% 37.8%,73% 37.2%,76.4% 36.9%,77.3% 37.6%,77.4% 40%,77.2% 59.6%,76.2% 61.6%,70% 62%,67.8% 61.4%,66.6% 58%)}
.vtf--np7a .vtf__k--motor{--x:16px;--y:2px;--g:50ms}
.vtf--np7a .vtf__e.vtf__k--motor{left:91.026%;top:47%}
.vtf--np7a .vtf__p.vtf__k--igne::before,.vtf--np7a .vtf__k--igne .vtf__m img{clip-path:polygon(45.4% 66.4%,49.6% 67.6%,50% 71.9%,67.6% 71.9%,67.8% 73.5%,67.4% 86%,66.2% 87.4%,57.6% 87.6%,56% 87%,53% 86.4%,49% 86.4%,47% 84.5%,43.6% 84.2%,42.6% 80%,43% 77.2%,45% 77%)}
.vtf--np7a .vtf__k--igne{--x:4px;--y:16px;--g:100ms}
.vtf--np7a .vtf__e.vtf__k--igne{left:77.436%;top:80%}
.vtf--np7a .vtf__h--besleme{left:48.077%;top:88%;width:8.205%}
.vtf--np7a .vtf__e.vtf__k--besleme{left:42.821%;top:94%}
.vtf--np7a .vtf__p.vtf__k--yag::before,.vtf--np7a .vtf__k--yag .vtf__m img{clip-path:polygon(47.2% 3.6%,48.8% 3.6%,48.8% 6.6%,49.8% 7.6%,50% 8.4%,50% 27.9%,43.2% 27.9%,43% 17.6%,41.6% 17.4%,41.2% 15%,41.8% 12.6%,43.2% 11.6%,44.2% 10.8%,46.2% 10.4%,46.6% 7.4%,47.2% 6.8%)}
.vtf--np7a .vtf__k--yag{--x:-14px;--y:-4px;--g:200ms}
.vtf--np7a .vtf__e.vtf__k--yag{left:41.538%;top:22%}
.vtf--np7a .vtf__e.vtf__k--govde{left:22.308%;top:70%}