/* ============================================================
   Füzyonist — "tek haritada" hizmet haritası
   Polenist ana sayfa hero'sundaki polen haritasının Füzyonist
   karşılığı: 9 hizmet çipi, merkezdeki ambleme çizimsel
   filamentlerle bağlanır; hatlar çip sırasıyla çizilir, sonra
   parçacıklar hat boyunca merkeze akar.
   Zemin: sayfanın unicornStudio sahnesi (koyu yeşil) — bölümün
   kendi arka planı yok, bilerek şeffaf.
   ============================================================ */

.fz-map{position:relative;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:4vh 0 3vh}
/* etiket bazı ekranlarda sola kayıyordu: .fz-map bir flex sütun ve
   align-items verilmemiş, blok tüm genişliğe yayılıp içindeki metin
   sola yaslanıyordu. Hem kutuyu hem metni ortalıyoruz. */
.fz-map__tag{margin-bottom:1.6vh;align-self:center;text-align:center}
.fz-map__tag .nav-tag{text-align:center}

.fz-map__title{
  margin:0 auto;
  /* başlık tek kelimelik değil, uzun bir cümle: daha geniş kutu ve
     bir tık küçük punto ile üç satırda dengeli dursun */
  max-width:34ch;
  text-align:center;
  color:#DEE3DC;
  font-family:"Google Sans Flex",sans-serif;
  font-weight:500;
  font-size:clamp(1.45rem,2.9vw,3.35rem);
  line-height:1.14;
  letter-spacing:-.022em;
  text-shadow:0 2px 26px rgba(5,9,11,.5);
}

/* ---------- sahne ---------- */
.fz-map__stage{
  position:relative;
  margin:2.2vh auto 0;
  width:100%;
  flex:1 1 auto;
  min-height:0;
}


/* ---------- filamentler ---------- */
/* z-index: parçacıklar yörüngeye girince amblemin üstünde kalsın
   (hatların kendisi amblemin dışında bittiği için üstte olmaları fark etmez) */
.fz-map__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.fz-map__wires .wire{
  fill:none;
  stroke:rgba(205,210,203,.5);
  stroke-width:1.15;
  stroke-linecap:round;
}
.fz-map__wires .wire,.fz-map__wires .node{transition:stroke-opacity .4s ease,fill-opacity .4s ease}
.fz-map[data-focus] .fz-map__wires .wire{stroke-opacity:.22}
.fz-map[data-focus] .fz-map__wires .node{fill-opacity:.22}
.fz-map[data-focus="0"] .fz-map__wires .wire.w-g0,
.fz-map[data-focus="1"] .fz-map__wires .wire.w-g1,
.fz-map[data-focus="2"] .fz-map__wires .wire.w-g2{stroke-opacity:1}
.fz-map[data-focus="0"] .fz-map__wires .node.w-g0,
.fz-map[data-focus="1"] .fz-map__wires .node.w-g1,
.fz-map[data-focus="2"] .fz-map__wires .node.w-g2{fill-opacity:1}
.fz-map__wires .node{fill:#8EA48D;opacity:.85}
.fz-map__wires .seed{fill:#DEE3DC;filter:drop-shadow(0 0 4px rgba(214,226,211,.45))}
.fz-map__wires .seed.is-orbit{filter:drop-shadow(0 0 7px rgba(214,226,211,.5))}

/* JS varken hatlar çizilerek gelir; JS yoksa doğrudan görünür */
.fz-map.is-armed .fz-map__wires .wire{stroke-dashoffset:var(--len)}
.fz-map.is-live .fz-map__wires .wire{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) var(--d,0s);
}
.fz-map.is-armed .fz-map__wires .node{opacity:0}
.fz-map.is-live .fz-map__wires .node{opacity:.85;transition:opacity .5s ease calc(var(--d,0s) + .75s)}

/* ---------- merkez amblem ---------- */
.fz-map__core{
  position:absolute;
  left:50%;top:47%;
  transform:translate(-50%,-50%);
  width:clamp(150px,18.5vw,292px);
  aspect-ratio:1;
  display:grid;place-items:center;
}
.fz-map__core svg{width:100%;height:100%;overflow:visible}
.fz-map__core::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;
  background:rgba(142,164,141,.10);filter:blur(22px);
}
.fz-map.is-armed .fz-map__core{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.fz-map.is-live .fz-map__core{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.3,1)}

/* Yörüngeler sabit: amblem markanın birebir çizimi olarak durur.
   Her yörünge menüdeki bir servis grubuna karşılık gelir; grubun
   çiplerinden biri üzerine gelince o yörünge belirginleşir. */
.fz-map__core .orb{transition:stroke-opacity .4s ease,stroke-width .4s ease}
.fz-map.has-focus .fz-map__core .orb{stroke-opacity:.22}
.fz-map.has-focus .fz-map__core .orb.is-hot{stroke-opacity:1;stroke-width:2.6}

/* ---------- çipler ---------- */
.fz-map__chip{
  position:absolute;
  top:var(--y);
  z-index:2;               /* parçacık katmanının üstünde kalsın */
  --tx:0;--ty:-50%;--ox:0;--oy:0;
  box-sizing:border-box;
  transform:translate(var(--tx),var(--ty)) translate(var(--ox),var(--oy));
  display:inline-flex;align-items:center;gap:.55em;
  max-width:none;
  padding:.52em .92em .52em .72em;
  border-radius:.7em;
  background:transparent;
  border:1px solid rgba(243,236,223,.4);
  color:#F3ECDF;
  font-family:"Google Sans Flex",sans-serif;
  font-size:clamp(.7rem,.9vw,.96rem);
  font-weight:500;
  line-height:1.25;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .35s ease,background-color .3s ease;
}
.fz-map__chip.is-l{right:var(--x)}
.fz-map__chip.is-r{left:var(--x)}
/* alt sıra: üç çip, --x konumuna göre ortalanır */
.fz-map__chip.is-b{left:var(--x);--tx:-50%}
.fz-map__chip.is-c{left:50%;--tx:-50%}
.fz-map__chip .ico{flex:none;width:1.45em;height:1.45em;color:#CFDCC9;display:block}
.fz-map__chip .lbl{flex:1 1 auto;white-space:nowrap}
.fz-map__chip .ico svg{width:100%;height:100%;display:block}
.fz-map__chip:hover{background:rgba(243,236,223,.07);border-color:rgba(243,236,223,.8)}
.fz-map__chip.is-l:hover{--ox:-.35rem}
.fz-map__chip.is-r:hover{--ox:.35rem}
.fz-map__chip.is-b:hover,
.fz-map__chip.is-c:hover{--oy:.35rem}
/* --- grup seçimi: aynı ana başlık altındaki üç servis birlikte seçilir --- */
.fz-map__chip .grp{
  position:absolute;
  bottom:calc(100% + .5em);
  --gy:5px;
  transform:translateY(var(--gy));
  white-space:nowrap;
  color:#8EA48D;
  font-size:clamp(.54rem,.62vw,.7rem);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.fz-map__chip.is-l .grp{right:.15em}
.fz-map__chip.is-r .grp{left:.15em}
.fz-map__chip.is-b .grp,
.fz-map__chip.is-c .grp{left:50%;transform:translate(-50%,var(--gy))}
.fz-map__chip.is-kin .grp{opacity:.95;--gy:0}

.fz-map__chip.is-kin{
  border-color:rgba(243,236,223,.85);
  background:rgba(243,236,223,.07);
}
.fz-map.is-live.has-focus .fz-map__chip:not(.is-kin){opacity:.4}
.fz-map__chip:focus-visible{outline:2px solid #8EA48D;outline-offset:3px}

.fz-map.is-armed .fz-map__chip{opacity:0}
.fz-map.is-armed .fz-map__chip.is-l{--ox:-1.4rem}
.fz-map.is-armed .fz-map__chip.is-r{--ox:1.4rem}
.fz-map.is-armed .fz-map__chip.is-b,
.fz-map.is-armed .fz-map__chip.is-c{--oy:1.2rem}
.fz-map.is-live .fz-map__chip{
  opacity:1;--ox:0;--oy:0;
  transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.7,.3,1) var(--d,0s),border-color .35s ease,background-color .3s ease;
}

/* ---------- tablet ---------- */
@media(max-width:991px){
  .fz-map__chip{font-size:.74rem;letter-spacing:.01em;padding:.5em .8em .5em .62em}
}

/* ---------- mobil: harita dikey listeye düşer ---------- */
@media(max-width:767px){
  .fz-map{height:auto;display:block;padding:12vw 0 6vw}
  .fz-map__title{max-width:none;font-size:clamp(1.35rem,6vw,2.1rem)}
  .fz-map__title br{display:none}
  .fz-map__stage{
    min-height:0;
    display:flex;flex-direction:column;align-items:center;
    gap:.7rem;margin-top:2.4rem;
  }
  .fz-map__wires{display:none}
  .fz-map__core{position:static;transform:none;width:132px;margin-bottom:1.4rem}
  .fz-map.is-armed .fz-map__core{transform:scale(.9)}
  .fz-map.is-live .fz-map__core{transform:scale(1)}
  .fz-map__chip,
  .fz-map__chip.is-l,
  .fz-map__chip.is-r,
  .fz-map__chip.is-b,
  .fz-map__chip.is-c{
    position:static;left:auto;right:auto;--tx:0;--ty:0;
    width:100%;max-width:none;justify-content:flex-start;
    font-size:.9rem;padding:.7em 1em .7em .8em;
  }
  .fz-map.is-armed .fz-map__chip,
  .fz-map.is-armed .fz-map__chip.is-l,
  .fz-map.is-armed .fz-map__chip.is-r,
  .fz-map.is-armed .fz-map__chip.is-c{--ox:0;--oy:.8rem}
  .fz-map.is-live .fz-map__chip{--ox:0;--oy:0}
  .fz-map__chip:hover{--ox:0;--oy:0}
  .fz-map__chip .lbl{white-space:normal}
  .fz-map__chip .grp{display:none}
}

/* ---------- hareket azaltma ---------- */
@media(prefers-reduced-motion:reduce){
  .fz-map.is-armed .fz-map__chip{opacity:1;--ox:0;--oy:0}
  .fz-map.is-armed .fz-map__core{opacity:1;transform:translate(-50%,-50%)}
  .fz-map.is-armed .fz-map__wires .wire{stroke-dashoffset:0}
  .fz-map.is-armed .fz-map__wires .node{opacity:.85}
  .fz-map__chip,.fz-map__core,.fz-map__wires .wire,.fz-map__wires .node,
  .fz-map__chip .grp,.fz-map__core .orb{transition:none !important}
}

/* Eski başlık artık en altta, tek satır küçük not */
.fz-map__note{
  flex:none;
  margin:1.2vh 0 0;
  text-align:center;
  color:#CDD2CB;
  opacity:.8;
  font-family:"Google Sans Flex",sans-serif;
  /* başlık ~3.4vw (h1 ölçeği); not h3 ölçeğinde kalsın */
  font-size:clamp(1rem,1.7vw,1.85rem);
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1.3;
  white-space:nowrap;
}
@media(max-width:767px){
  .fz-map__note{white-space:normal;font-size:4.4vw;margin-top:5vw}
}

/* ============================================================
   Sunum ayıraç panellerindeki amblem (.fz-orb)
   "Kimler İçin" haritasının hover hâlinin durağan karşılığı:
   panelin servis grubunun yörüngesi öne çıkar, diğer ikisi geri
   çekilir; o yörüngede grubun üç servisi parçacık olarak döner.
   Parçacıklar assets/js/fz-orb.js ile viewBox biriminde çizilir.
   ============================================================ */
.fz-orb{
  width:clamp(150px,15vw,290px);
  aspect-ratio:1;
  display:block;
  position:relative;
  opacity:0;
  transform:scale(.92);
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.3,1);
}
.fz-orb.is-in{opacity:1;transform:scale(1)}
.fz-orb svg{width:100%;height:100%;display:block;overflow:visible}
.fz-orb::before{
  content:"";position:absolute;inset:-10%;border-radius:50%;
  background:rgba(142,164,141,.07);filter:blur(30px);
}
.fz-orb .orb{stroke-opacity:.22}
.fz-orb[data-grp="0"] .orb-0,
.fz-orb[data-grp="1"] .orb-1,
.fz-orb[data-grp="2"] .orb-2{stroke-opacity:1;stroke-width:2.6}
.fz-orb .seed{fill:#DEE3DC;filter:drop-shadow(0 0 5px rgba(214,226,211,.5))}

@media(max-width:767px){
  .fz-orb{width:46vw}
}
@media(prefers-reduced-motion:reduce){
  .fz-orb{opacity:1;transform:none;transition:none}
}