/* Bili maskotu — kapsayıcı ve katman stilleri. Global reset YOK. */

.maskot {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* İç sarmalayıcı: kaydırırken uçuş tepkisi (maskot.js) transform'unu YALNIZ buraya uygular,
   `.maskot`'a (dış kapsayıcı) DEĞİL — o, gömen sayfanın CSS'iyle konumlanmış/dönüştürülmüş
   olabilir (ör. sabit köşe düğmesi + kendi hover transform'u). transform-origin alt-orta:
   iniş sekmesindeki hafif sıkışma "ayaklar yerde" gibi dursun diye. */
.maskot__ucus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

/* Kaydırma-uçuşu AÇIK maskotlarda maskot.js ucusKur() ekler: hız çizgileri kutunun biraz DIŞINA
   (ayakların altına / kulakların üstüne) sürüklenebilsin diye `.maskot`'un normal `overflow:
   hidden`'ı burada AÇIK (visible) yapılır — yalnız bu sınıf taşıyan maskotlarda; kart içi
   maskotlar `.maskot` varsayılanında (hidden) kalır. img/canvas kutuyu aynen dolduruyor, davranışı
   değişmez, yalnız artık taşan içerik kırpılmıyor (proje sahibi isteği, 2. tur). */
.maskot--kaydirma {
  overflow: visible;
}

/* Hız çizgileri (yalnız kaydırma-uçuşu açık maskotlarda maskot.js ucusKur() kurar): `.maskot__ucus`
   ile kardeş, ARKASINDA (DOM'da ondan önce) — Bili'nin üstüne binmesin. Konum/boyut kuruluşta bir
   kez satır-içi stille verilir; her karede YALNIZ opacity + transform (translateY) değişir. */
.maskot__hiz {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.maskot__hiz-cizgi {
  position: absolute;
  width: 2.8%; /* kalınlık kutuya göre — sahip: ×2, sonra iki kez %25 küçült (112px'te ~3px) */
  background: var(--renk-mavi, #3e7be0);
  border-radius: 999px;
  opacity: 0;
}

.maskot__png,
.maskot__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.maskot__png {
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.maskot__canvas {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.maskot--3d .maskot__canvas {
  opacity: 1;
}

.maskot--3d .maskot__png {
  opacity: 0;
}