/* KOL: sabit gövde üzerinde kısa hareket eden katman, omuz eklemi gövdeye bağlı */
#guide{--gsize:390px;position:fixed;bottom:-10px;left:0;width:var(--gsize);height:var(--gsize);z-index:20000;opacity:0;transform:translate3d(-55px,38px,0) scale(.95);pointer-events:none;filter:drop-shadow(0 11px 13px rgba(22,42,64,.13));will-change:transform,opacity}
#guide .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#guide .arm{transform-origin:43% 40%;will-change:transform}
#guide.play{animation:arrival 1.05s cubic-bezier(.2,.86,.22,1) forwards}
#guide.play.leaving{animation:depart 1.05s ease-in forwards}
#guide.play .arm{animation:knock 5s ease-in-out 1.05s both}
@keyframes arrival{to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes depart{to{opacity:0;transform:translate3d(-28px,24px,0) scale(.96)}}
/* İki ufak dokunuş. Gövde tam görüntü olarak altta: boşluk oluşmaz. */
@keyframes knock{
  0%,10%,17%,29%,36%,100%{transform:rotate(0deg)}
  13%,32%{transform:rotate(1.4deg)}
  15%,34%{transform:rotate(.2deg)}
}
#mouth{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
#mouthOpen{transform-box:fill-box;transform-origin:center;transform:scaleY(.08);opacity:0;transition:opacity .08s}
#guide.speaking #mouthOpen{opacity:1;animation:mouthTalk .27s ease-in-out infinite alternate}
@keyframes mouthTalk{0%{transform:scaleY(.28)}50%{transform:scaleY(1)}100%{transform:scaleY(.45)}}
#tap{position:absolute;left:24.5%;top:40.7%;height:54px;width:54px;border-radius:50%;border:3px solid #ffaa21;opacity:0;transform:scale(.3);box-shadow:0 0 0 1px rgba(255,255,255,.4);z-index:2}
#guide.play #tap{animation:tap1 .45s ease-out 1.70s both,tap1 .45s ease-out 2.65s both}
@keyframes tap1{0%{opacity:.95;transform:scale(.2)}95%{opacity:0;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}
#bubble{position:fixed;left:clamp(200px,25vw,330px);bottom:240px;width:min(300px,calc(100vw - 218px));background:rgba(255,255,255,.98);border:1px solid #e2e9f3;box-shadow:0 14px 40px rgba(27,55,82,.14);padding:16px 17px;border-radius:18px 18px 18px 3px;z-index:20001;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .32s,transform .32s;color:#1f3654;font-size:15px;font-weight:700;line-height:1.5}
#bubble.show{opacity:1;transform:translateY(0)}#bubble .wave{font-size:19px;margin-right:5px}
#cta{position:fixed;right:28px;top:47%;z-index:20002;opacity:0;transform:translateX(23px) scale(.95);transition:opacity .5s,transform .5s;pointer-events:none;background:linear-gradient(110deg,#164c83,#0b76be);box-shadow:0 15px 30px #0b477341;color:white;text-decoration:none;border-radius:15px;padding:17px 23px;font-weight:850;font-size:15px;letter-spacing:.015em}#cta.show{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}#cta:hover{filter:brightness(1.1)}
@media(max-width:650px){#guide{--gsize:260px;left:-18px;bottom:-8px}#bubble{left:142px;bottom:190px;width:calc(100vw - 154px);min-width:175px;padding:12px 13px;font-size:13px}#cta{right:9px;top:auto;bottom:115px;font-size:11px;padding:12px 13px;max-width:152px;text-align:center}}
@media(prefers-reduced-motion:reduce){#guide.play{animation:arrival .5s ease forwards}#guide.play .arm,#guide.play #tap{animation:none}}


#bubble.show{pointer-events:auto}
#guideSound{margin-top:9px;border:0;background:#e1f1ff;color:#174d83;padding:8px 12px;border-radius:9px;font-size:12px;cursor:pointer;font-weight:750}
#guideSound[hidden]{display:none!important}