/* =====================================================================
   Vektörel çizimler — görünüm ve hareket

   🔴 TABAN ÇİZİM = SON DURUM. Hareket yalnız `prefers-reduced-motion:
   no-preference` içinde tanımlanır; hareket kapalıyken çizim eksiksiz ve
   anlamlı durur (yarım bükülmüş sac, yarı dolu silo gibi bir şey kalmaz).

   🔴 ZERRELER `transform: translate` ile taşınıyor, `offset-path` ile değil:
   offset-path desteklenmeyen tarayıcıda zerre 0,0'da kalır ve çizim bozulur.

   🔴 Sahnelerde yazı yok; renkler açık (kâğıt) zemine göre seçildi.
   ===================================================================== */

.vek{
  --v-koyu:#1f2126;
  --v-mavi:#2a4a8c;
  --v-ac:#8296b6;
  --v-cam:#1690b1;
  --v-sari:#c98f05;
  --v-sari-dolgu:#f2b705;
  --v-izg:#ccd7e8;

  display:block;width:100%;height:auto;overflow:visible;
}

/* ------------------------------------------------------------- ortak boya */

.v-izgara{stroke:var(--v-izg);stroke-width:1}
.v-govde{fill:var(--v-mavi)}
.v-govde-d{fill:var(--v-sari-dolgu)}
.v-cizgi{stroke:var(--v-mavi);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v-ince{stroke:var(--v-ac);stroke-width:1.5;stroke-linecap:round}
.v-kanal{stroke:var(--v-koyu);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.v-kabuk{stroke:var(--v-ac);stroke-width:2.5;stroke-linecap:round}
.v-zemin{stroke:var(--v-koyu);stroke-width:3}
.v-flans{stroke:var(--v-cam);stroke-width:2;fill:none}
.v-dolu{fill:var(--v-koyu)}
.v-kanat{stroke:var(--v-mavi);stroke-width:3;stroke-linecap:round}
.v-zerre{fill:var(--v-cam)}
.v-ok{stroke:var(--v-cam);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 7}
.v-olcu{stroke:var(--v-ac);stroke-width:1.5;stroke-dasharray:4 4}
.v-yuk{fill:var(--v-sari-dolgu)}
.v-cerceve{fill:none;stroke:var(--v-sari);stroke-width:3}
.v-seviye{fill:var(--v-sari-dolgu)}
.v-birikim{fill:var(--v-sari-dolgu)}
.v-civata{fill:var(--v-sari-dolgu)}
.v-dosme path{stroke:var(--v-ac)}

/* Koyu zeminde kullanılırsa (ana sayfa açılışı gibi) renkler açılır. */
.bolum-koyu .vek,.acilis .vek{
  --v-koyu:#dbe4f2;--v-mavi:#9fc0ef;--v-ac:#7b8dad;--v-izg:rgba(255,255,255,.10);
}

/* =====================================================================
   HAREKET — yalnız hareket tercihi kapalı DEĞİLSE
   ===================================================================== */

@media (prefers-reduced-motion: no-preference){

  /* --- pervane (havalandırma, toz emiş, tesis kesiti) --- */
  .v-pervane{animation:v-don 2.4s linear infinite}
  @keyframes v-don{to{transform:rotate(360deg)}}

  /* --- tekerlek --- */
  .v-teker{animation:v-don 1.6s linear infinite}

  /* --- makine mili --- */
  .v-mil{animation:v-don 3.2s linear infinite}

  /* --- çıkan hava okları: aşağı akan kesikli çizgi --- */
  .v-cik .v-ok{animation:v-ok-ak 1.1s linear infinite}
  @keyframes v-ok-ak{to{stroke-dashoffset:-28}}
  .v-temas .v-ok{animation:v-ok-ak 1.4s linear infinite}

  /* ---------------------------------------------------- 01 havalandırma */
  .vek-hav .v-zerre{animation:v-hav 3.2s linear infinite;opacity:0}
  .vek-hav .v-z1{animation-delay:0s}
  .vek-hav .v-z2{animation-delay:.8s}
  .vek-hav .v-z3{animation-delay:1.6s}
  .vek-hav .v-z4{animation-delay:2.4s}
  @keyframes v-hav{
    0%  {transform:translate(88px,118px);opacity:0}
    10% {opacity:1}
    50% {transform:translate(228px,118px);opacity:1}
    76% {transform:translate(266px,152px);opacity:1}
    100%{transform:translate(284px,184px);opacity:0}
  }

  /* ---------------------------------------------------- 02 büküm */
  .vek-buk .v-bicak{animation:v-bicak 3.4s ease-in-out infinite}
  @keyframes v-bicak{
    0%,10%   {transform:translateY(0)}
    38%,58%  {transform:translateY(56px)}
    86%,100% {transform:translateY(0)}
  }
  .vek-buk .v-sac-duz{fill:var(--v-koyu);animation:v-sac-git 3.4s ease-in-out infinite}
  .vek-buk .v-sac-buk{fill:var(--v-koyu);opacity:0;animation:v-sac-gel 3.4s ease-in-out infinite}
  @keyframes v-sac-git{0%,30%{opacity:1}38%,100%{opacity:0}}
  @keyframes v-sac-gel{0%,30%{opacity:0}38%,100%{opacity:1}}

  /* ---------------------------------------------------- 03 lojistik */
  .vek-loj .v-araba{animation:v-araba 6.5s linear infinite}
  @keyframes v-araba{
    0%  {transform:translateX(-46px);opacity:0}
    8%  {opacity:1}
    88% {opacity:1}
    100%{transform:translateX(104px);opacity:0}
  }
  .vek-loj .v-yuk rect{animation:v-salla 1.3s ease-in-out infinite}
  .vek-loj .v-yuk rect:nth-child(2){animation-delay:.18s}
  .vek-loj .v-yuk rect:nth-child(3){animation-delay:.36s}
  @keyframes v-salla{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

  /* ---------------------------------------------------- 04 montaj */
  .vek-mon .v-inen{animation:v-in 5s ease-in-out infinite}
  @keyframes v-in{
    0%,8%    {transform:translateY(-74px)}
    42%,78%  {transform:translateY(0)}
    96%,100% {transform:translateY(-74px)}
  }
  .vek-mon .v-halat{animation:v-halat 5s ease-in-out infinite;transform-origin:200px 50px}
  @keyframes v-halat{
    0%,8%    {transform:scaleY(1)}
    42%,78%  {transform:scaleY(1.62)}
    96%,100% {transform:scaleY(1)}
  }
  .vek-mon .v-civata circle{opacity:0;animation:v-civata 5s ease-in-out infinite}
  .vek-mon .v-civata circle:nth-child(2){animation-delay:.16s}
  .vek-mon .v-civata circle:nth-child(3){animation-delay:.32s}
  @keyframes v-civata{0%,44%{opacity:0;transform:scale(.4)}52%,80%{opacity:1;transform:scale(1)}88%,100%{opacity:0}}
  .vek-mon .v-temas{opacity:0;animation:v-temas 5s ease-in-out infinite}
  @keyframes v-temas{0%,42%{opacity:0}50%,80%{opacity:1}88%,100%{opacity:0}}

  /* ---------------------------------------------------- 05 silo */
  .v-seviye{animation:v-dolu-bos 9s ease-in-out infinite}
  @keyframes v-dolu-bos{
    0%       {transform:translateY(148px)}
    34%,54%  {transform:translateY(6px)}
    88%,100% {transform:translateY(148px)}
  }
  .vek-sil .v-dokum .v-zerre{animation:v-dok 1.1s linear infinite;opacity:0}
  .vek-sil .v-d2{animation-delay:.36s}
  .vek-sil .v-d3{animation-delay:.72s}
  @keyframes v-dok{
    0%  {transform:translate(180px,214px);opacity:0}
    15% {opacity:1}
    100%{transform:translate(180px,256px);opacity:0}
  }

  /* ---------------------------------------------------- 06 fence */
  .v-p1,.v-p2,.v-p3,.v-p4{animation:v-dik 4.4s ease-in-out infinite}
  .vek-fen .v-p1 .v-panel,.vek-fen .v-p2 .v-panel,
  .vek-fen .v-p3 .v-panel,.vek-fen .v-p4 .v-panel{transform-box:fill-box;transform-origin:50% 100%}
  .v-p2{animation-delay:.22s}
  .v-p3{animation-delay:.44s}
  .v-p4{animation-delay:.66s}
  @keyframes v-dik{
    0%      {opacity:0}
    6%      {opacity:1}
    82%,100%{opacity:1}
  }
  .vek-fen .v-panel{animation:v-dik-olcek 4.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  @keyframes v-dik-olcek{
    0%      {transform:scaleY(.06)}
    22%,100%{transform:scaleY(1)}
  }

  /* ---------------------------------------------------- toz emiş */
  .vek-toz .v-toz .v-zerre{animation:v-toz-ak 4s linear infinite;opacity:0}
  .vek-toz .v-tz2{animation-delay:1s}
  .vek-toz .v-tz3{animation-delay:2s}
  .vek-toz .v-tz4{animation-delay:3s}
  @keyframes v-toz-ak{
    0%  {transform:translate(92px,180px);opacity:0}
    10% {opacity:1}
    28% {transform:translate(88px,128px)}
    40% {transform:translate(87px,76px)}
    72% {transform:translate(232px,74px)}
    88% {transform:translate(259px,100px)}
    100%{transform:translate(259px,126px);opacity:0}
  }
  .vek-toz .v-birikim{transform-box:fill-box;transform-origin:50% 100%;animation:v-birik 8s ease-in-out infinite}
  @keyframes v-birik{0%{transform:scaleY(.12)}60%,100%{transform:scaleY(1)}}

  /* ---------------------------------------------------- platform */
  .vek-plt .v-k1,.vek-plt .v-k2,.vek-plt .v-k3,.vek-plt .v-k4{
    opacity:0;animation:v-kur 5.2s ease-out infinite}
  .vek-plt .v-k2{animation-delay:.5s}
  .vek-plt .v-k3{animation-delay:1s}
  .vek-plt .v-k4{animation-delay:1.5s}
  @keyframes v-kur{
    0%      {opacity:0;transform:translateY(-10px)}
    14%     {opacity:1;transform:translateY(0)}
    88%,100%{opacity:1;transform:translateY(0)}
  }

  /* ---------------------------------------------------- debi şeması */
  .vek-deb .v-yavas .v-zerre{animation:v-yavas 4.6s linear infinite;opacity:0}
  .vek-deb .v-y2{animation-delay:1.5s}
  .vek-deb .v-y3{animation-delay:3s}
  @keyframes v-yavas{
    0%  {transform:translate(16px,130px);opacity:0}
    10% {opacity:1}
    60% {transform:translate(170px,130px);opacity:1}
    100%{transform:translate(392px,130px);opacity:0}
  }
  .vek-deb .v-hizli .v-zerre{animation:v-hizli 4.6s linear infinite;opacity:0}
  .vek-deb .v-h2{animation-delay:1.5s}
  .vek-deb .v-h3{animation-delay:3s}
  @keyframes v-hizli{
    0%  {transform:translate(16px,112px);opacity:0}
    10% {opacity:1}
    60% {transform:translate(170px,122px);opacity:1}
    100%{transform:translate(392px,138px);opacity:0}
  }

  /* ---------------------------------------------------- tesis kesiti */
  .vek-tesis .v-akis .v-zerre{animation:v-tes-akis 6s linear infinite;opacity:0}
  .vek-tesis .v-f2{animation-delay:1.5s}
  .vek-tesis .v-f3{animation-delay:3s}
  .vek-tesis .v-f4{animation-delay:4.5s}
  @keyframes v-tes-akis{
    0%  {transform:translate(112px,113px);opacity:0}
    8%  {opacity:1}
    90% {transform:translate(790px,113px);opacity:1}
    100%{transform:translate(822px,126px);opacity:0}
  }
  .vek-tesis .v-bicak2{animation:v-bicak2 3.4s ease-in-out infinite}
  @keyframes v-bicak2{
    0%,12%   {transform:translateY(0)}
    40%,60%  {transform:translateY(54px)}
    88%,100% {transform:translateY(0)}
  }
  .vek-tesis .v-sac2{fill:var(--v-koyu)}
  /* Araba ÖN koridorda: baştan sona geçer, makineye ya da kafese binmez. */
  .vek-tesis .v-araba2{animation:v-araba2 11s linear infinite}
  @keyframes v-araba2{
    0%  {transform:translateX(40px);opacity:0}
    6%  {opacity:1}
    92% {opacity:1}
    100%{transform:translateX(820px);opacity:0}
  }
  .vek-tesis .v-p1 .v-panel,.vek-tesis .v-p3 .v-panel{animation:none;transform:none}
  .vek-tesis .v-p1,.vek-tesis .v-p3{animation:none;opacity:1}

} /* /prefers-reduced-motion */

/* 🔴 Ziyaretçinin "animasyonları durdur" düğmesi (WCAG 2.2.2) — tercih
   localStorage'da, try/catch içinde. Durdurulunca çizim olduğu yerde kalır. */
.hareket-dur .vek *{animation-play-state:paused !important}

.hareket-dugme{
  position:fixed;left:14px;bottom:14px;z-index:46;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(15,27,51,.86);color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(15,27,51,.3)}
.hareket-dugme svg{width:20px;height:20px;fill:currentColor}
.hareket-dugme .d-oynat{display:none}
.hareket-dur .hareket-dugme .d-dur{display:none}
.hareket-dur .hareket-dugme .d-oynat{display:block}
@media (prefers-reduced-motion: reduce){.hareket-dugme{display:none}}

/* =====================================================================
   SÜS ÇİZİMLERİ — manşet motifi ve altbilgi şeridi
   🔴 Yalnız hareket tercihi kapalı değilse; durduğunda çizim yerinde kalır.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .panel-motif .pm-fan{animation:v-don 7s linear infinite}
  .panel-motif .pm-zerre circle{fill:currentColor;opacity:0;animation:pm-ak 5.5s linear infinite}
  .panel-motif .pz2{animation-delay:1.8s}
  .panel-motif .pz3{animation-delay:3.6s}
  @keyframes pm-ak{
    0%  {transform:translate(292px,74px);opacity:0}
    12% {opacity:.9}
    46% {transform:translate(140px,74px);opacity:.9}
    70% {transform:translate(96px,122px);opacity:.9}
    100%{transform:translate(96px,232px);opacity:0}
  }

  .alt-cizgi .ac-zerre circle{fill:currentColor;opacity:0;animation:ac-ak 9s linear infinite}
  .alt-cizgi .az2{animation-delay:2.2s}
  .alt-cizgi .az3{animation-delay:4.4s}
  .alt-cizgi .az4{animation-delay:6.6s}
  @keyframes ac-ak{
    0%  {transform:translateX(-20px);opacity:0}
    8%  {opacity:1}
    92% {opacity:1}
    100%{transform:translateX(1220px);opacity:0}
  }
}