/**
 * Sektörel "Nerede Kullanılır" animasyonu — motor stilleri (14.08.2026).
 *
 * Kaynak: Güneş'in verdiği tek dosyalık prototip
 * (~/Downloads/vycall-cagri-animasyonlari.html). Motor MANTIĞI birebir
 * korundu; siteye uyarlanan üç şey:
 *   1. Poppins kaldırıldı — site Urbanist'i kendi barındırıyor, dışarıdan
 *      Google Fonts isteği açılmaz. Yazı tipi gövdeden miras alınır.
 *   2. Prototipin mavisi (#2F6BED) marka mavisine (#1C92E9) çevrildi,
 *      mürekkep ve çizgi renkleri site token'larına (--title, --border) çekildi.
 *   3. Kendi 1240px hattı kaldırıldı — blok sayfanın .container hattına oturur.
 *
 * Yalnız sektör sayfalarında yüklenir ($needsSektorAnim).
 */

.vy-anim{--vy-blue:#1C92E9;--vy-blue-dark:#137AC4;--vy-blue-soft:#E6F3FD;--vy-ink:#282C32;
  --vy-ink2:#3D4C63;--vy-ink3:#7A879C;--vy-line:#E6E6E6;--vy-bg:#F5F8FC;
  font-family:inherit;color:var(--vy-ink);width:100%;margin:0;padding:0;-webkit-font-smoothing:antialiased}
.vy-anim *{box-sizing:border-box}
.vy-head{text-align:center;margin-bottom:30px}
.vy-badge{display:inline-flex;align-items:center;gap:8px;background:var(--vy-blue-soft);color:var(--vy-blue);
  font-weight:600;font-size:14px;padding:8px 18px;border-radius:999px}
.vy-anim h2{font-size:44px;line-height:1.15;letter-spacing:-.02em;margin:18px 0 14px;font-weight:700}
.vy-head p{max-width:740px;margin:0 auto;color:var(--vy-ink2);font-size:16px;line-height:1.65}
.vy-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.vy-tab{border:1px solid var(--vy-line);background:#fff;color:var(--vy-ink2);font-family:inherit;font-size:14.5px;
  font-weight:500;cursor:pointer;padding:11px 20px;border-radius:999px;transition:all .18s ease;
  display:flex;align-items:center;gap:8px}
.vy-tab:hover{border-color:#C3D3F2;color:var(--vy-ink)}
.vy-tab.on{background:var(--vy-blue);border-color:var(--vy-blue);color:#fff;box-shadow:0 6px 18px rgba(28,146,233,.28)}
.vy-tab i{width:7px;height:7px;border-radius:50%;background:#C3D3F2;display:block}
.vy-tab.on i{background:#fff}
.vy-card{background:#fff;border:1px solid var(--vy-line);border-radius:16px;padding:14px}
.vy-inner{background:var(--vy-bg);border-radius:12px;overflow:hidden}
.vy-anim svg{display:block;width:100%;height:auto}
.vy-note{max-width:1240px;margin:14px auto 0;font-size:12.5px;color:var(--vy-ink3);text-align:center;line-height:1.6}

.vy-anim .zone-label{font-size:12.5px;font-weight:600;letter-spacing:.14em;fill:#93A2B8}
.vy-anim .room-label{font-size:9.5px;font-weight:600;letter-spacing:.06em;fill:#9DAABE}
.vy-anim .zone-rect{fill:#E9EFF7;stroke:#DAE3EF;stroke-width:1.5}
.vy-anim .zone-room{fill:#EDF2F9;stroke:#DDE5F0;stroke-width:1.3}
.vy-anim .zone-pool{fill:#D8E7FB;stroke:#BFD6F5;stroke-width:1.5}
.vy-anim .zone-fly{fill:#E4EDFA;stroke:#CCDCF2;stroke-width:1.4}
.vy-anim .hull{fill:#E7EDF6;stroke:#C3D1E3;stroke-width:2}
.vy-anim .dec{fill:#DEE7F3}
.vy-anim .dec-s{fill:#C9D7E9}
.vy-anim .spot-g{cursor:pointer}
.vy-anim .icon-body{fill:#fff;stroke:#A6B8D0;stroke-width:1.8;transition:all .18s ease}
.vy-anim .icon-seat{fill:#C6D4E8;transition:fill .18s ease}
.vy-anim .icon-btn{fill:var(--vy-blue);opacity:.55;transition:opacity .18s ease}
.vy-anim .spot-g:hover .icon-body{stroke:var(--vy-blue)}
.vy-anim .spot-g:hover .icon-btn{opacity:1}
.vy-anim .spot-g.live .icon-body{stroke:var(--vy-blue);fill:var(--vy-blue-soft)}
.vy-anim .spot-g.live .icon-seat{fill:#9FC0F7}
.vy-anim .spot-g.live .icon-btn{opacity:1}
.vy-anim .disk{fill:#fff;stroke:var(--vy-blue);stroke-width:2;opacity:.55;transition:all .2s ease}
.vy-anim .disk-core{fill:var(--vy-blue);opacity:.35;transition:opacity .2s ease}
.vy-anim .spot-g:hover .disk{opacity:1}
.vy-anim .spot-g.live .disk{opacity:1;fill:var(--vy-blue);stroke:var(--vy-blue-dark)}
.vy-anim .spot-g.live .disk-core{fill:#fff;opacity:1}
.vy-anim .buzz{opacity:0;stroke:var(--vy-blue);stroke-width:2;fill:none}
.vy-anim .spot-g.live .buzz{opacity:.8}
.vy-anim .link{stroke:var(--vy-blue);stroke-width:1;opacity:.12}
.vy-anim .ray{stroke:var(--vy-blue);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:5 7;
  animation:vy-dash .7s linear forwards}
@keyframes vy-dash{from{stroke-dashoffset:110}to{stroke-dashoffset:0}}
.vy-anim .pulse{fill:none;stroke:var(--vy-blue);stroke-width:2.5;animation:vy-pulse .9s ease-out forwards}
@keyframes vy-pulse{from{r:8;opacity:.9}to{r:38;opacity:0}}
.vy-anim .hub-ring{fill:none;stroke:#C7D5E8;stroke-width:1.4;stroke-dasharray:3 6}
.vy-anim .rcard{fill:#fff;stroke:var(--vy-line);stroke-width:1.5;transition:stroke .25s ease}
.vy-anim .rcard.on{stroke:#B9CDF7}
.vy-anim .rname{font-size:15px;font-weight:600;fill:var(--vy-ink)}
.vy-anim .rdesc{font-size:11.5px;fill:var(--vy-ink3)}
.vy-anim .rstep{font-size:10.5px;font-weight:600;letter-spacing:.1em;fill:#A9B6C9}
.vy-anim .dev-body{fill:#EEF2F8;stroke:#CBD6E6;stroke-width:1.6}
.vy-anim .dev-screen{fill:#F7FAFF;stroke:#DCE5F2;stroke-width:1}
.vy-anim .key{fill:#DFE7F2}
.vy-anim .notif{opacity:0;transition:opacity .22s ease, transform .28s cubic-bezier(.2,.8,.3,1)}
.vy-anim .notif.on{opacity:1}
.vy-anim .n-phone{transform:translateY(-9px)} .vy-anim .n-phone.on{transform:translateY(0)}
.vy-anim .n-row{transform:translateY(-7px)}   .vy-anim .n-row.on{transform:translateY(0)}
.vy-anim .n-box{transform:translateY(8px)}    .vy-anim .n-box.on{transform:translateY(0)}
.vy-anim .n-pager{transform:scale(.9)}        .vy-anim .n-pager.on{transform:scale(1)}
.vy-anim .n-lamp{transform:scale(.86)}        .vy-anim .n-lamp.on{transform:scale(1)}
.vy-anim .n-key{transform:scale(.92)}         .vy-anim .n-key.on{transform:scale(1)}
.vy-anim .n-disk{transform:scale(.9)}         .vy-anim .n-disk.on{transform:scale(1)}
.vy-anim .n-fill{fill:var(--vy-blue)}
.vy-anim .n-txt{font-size:8px;font-weight:600;fill:#fff}
.vy-anim .n-sub{font-size:7.5px;fill:#CFE0FF}
.vy-anim .n-num{font-size:13px;font-weight:700;fill:#fff}
.vy-anim .n-num3{font-size:26px;font-weight:700;letter-spacing:3px;fill:#fff}
.vy-anim .seg{fill:#E1E8F3}
.vy-anim .wave{stroke:var(--vy-blue);stroke-width:2;fill:none;opacity:0;transition:opacity .2s ease}
.vy-anim .wave.on{opacity:.75}
@media (max-width:900px){ .vy-anim h2{font-size:30px} }

/* ---------------------------------------------------------------------------
 * MOBİL PUNTO — 14.08.2026
 *
 * 🔴 Prototipteki hata: motor mobilde SVG metinlerine font-size="19"/"15.5"
 * NİTELİĞİ yazıyordu, ama yukarıdaki .rname/.rdesc CSS kuralları onu eziyordu
 * (SVG sunum niteliği HER CSS kuralına yenilir). Sonuç: mobil büyütme hiç
 * çalışmıyordu ve metinler 375px ekranda 5,7 px'e düşüyordu — okunmaz.
 *
 * Çözüm: nitelikler motordan kaldırıldı, punto burada media query ile
 * veriliyor. Ölçek = svgGenişlik / 620, yani 375px ekranda ~0,50.
 * Ekrandaki karşılıkları (375px): rname 28→14 px · rdesc 21→10,5 px · zone 22→11 px.
 * Motor tarafında kart yüksekliği ve satır aralığı da bu puntolara göre
 * büyütüldü (frame() ve kart metin ofsetleri).
 * ------------------------------------------------------------------------- */
@media (max-width: 859px) {
  .vy-anim .rname      { font-size: 28px; }
  .vy-anim .rdesc      { font-size: 21px; }
  .vy-anim .rstep      { font-size: 19px; }
  .vy-anim .zone-label { font-size: 22px; }
  /* room-label BÜYÜTÜLMEZ: oda adları ("MASTER KABİN", "KIÇ GÜVERTE")
     dar oda dikdörtgenlerine sığmıyor, büyütünce taşıp kesiliyor gibi
     görünüyor (yat sayfasında ölçüldü: 9,5px'te 1 etiket 21 birim taşıyor,
     16px'te 4 etiket 66 birim). Bu etiketler dekoratif yön bulma öğesi;
     okunurluk için krokinin bozulmasına değmez. Motor varsayılanı kalır. */
}