/* Tekin mascot — bağımlılıksız (Rive/Lottie YOK) zengin CSS hareket sistemi.
   Karakter tek PNG; canlılık: süzülme + nefes + nabız gibi ışık halesi + parıltı. */
.atk-mascot{--tekin-size:96px;display:flex;align-items:center;gap:12px;max-width:440px;color:var(--text);font:500 .92rem/1.4 var(--sans);contain:layout;}
.atk-mascot[data-size="small"]{--tekin-size:48px}.atk-mascot[data-size="large"]{--tekin-size:240px}.atk-mascot[data-size="medium"]{--tekin-size:96px}

/* Sanat katmanı: karakter sürekli yumuşak süzülür + nefes alır (idle dahil her durum). */
.atk-mascot__art{position:relative;width:var(--tekin-size);height:var(--tekin-size);flex:0 0 var(--tekin-size);overflow:visible;transform-origin:center bottom;animation:tekin-float 3.6s ease-in-out infinite}
/* Arkada nabız gibi atan göksel ışık halesi (altın + violet). */
.atk-mascot__art::before{content:"";position:absolute;inset:-24%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 54%,rgba(231,182,89,.30),rgba(123,111,212,.17) 46%,transparent 70%);
  filter:blur(3px);animation:tekin-glow 3.6s ease-in-out infinite}
.atk-mascot__art img,.atk-mascot__art svg{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;transform-origin:center}
/* Layered Tekin stage — same canvas for body/wings/eyelids */
.atk-tekin-stage{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}
.atk-tekin-stage > img,
.atk-tekin-overlay,
.atk-tekin-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
.atk-tekin-body{z-index:2}
.atk-tekin-wing{z-index:3;transform:rotate(0deg);will-change:transform}
.atk-tekin-wing--left{transform-origin:31.1% 51%}   /* ~390,640 on 1254 canvas */
.atk-tekin-wing--right{transform-origin:68.9% 51%}  /* ~864,640 */
.atk-tekin-eyelid{z-index:5;opacity:0;will-change:opacity}
.atk-tekin-overlay{z-index:6;overflow:hidden}
.atk-tekin-overlay svg{width:100%;height:100%}
.atk-tekin-fallback{z-index:2;position:relative}

/* Intermittent blink (scheduled by controller — not a fixed infinite loop) */
.atk-tekin-stage.is-blinking .atk-tekin-eyelid{animation:tekin-blink .32s ease-in-out 1}
.atk-tekin-stage.is-double-blink .atk-tekin-eyelid{animation:tekin-blink-double .52s ease-in-out 1}
@keyframes tekin-blink{
  0%{opacity:0}
  32%{opacity:1}
  58%{opacity:1}
  100%{opacity:0}
}
@keyframes tekin-blink-double{
  0%{opacity:0}
  18%{opacity:1}
  30%{opacity:1}
  42%{opacity:0}
  58%{opacity:0}
  72%{opacity:1}
  84%{opacity:1}
  100%{opacity:0}
}

/* Intermittent wing flaps */
.atk-tekin-stage.is-flapping .atk-tekin-wing--left{animation:tekin-flap-left .86s cubic-bezier(.35,.1,.25,1) 1}
.atk-tekin-stage.is-flapping .atk-tekin-wing--right{animation:tekin-flap-right .86s cubic-bezier(.35,.1,.25,1) 1}
.atk-tekin-stage.is-flapping-strong .atk-tekin-wing--left{animation:tekin-flap-left-strong .98s cubic-bezier(.3,.12,.22,1) 1}
.atk-tekin-stage.is-flapping-strong .atk-tekin-wing--right{animation:tekin-flap-right-strong .98s cubic-bezier(.3,.12,.22,1) 1}
.atk-tekin-stage.is-wave .atk-tekin-wing--left{animation:tekin-wave-left .95s cubic-bezier(.35,.1,.25,1) 1}
.atk-tekin-stage.is-wave .atk-tekin-wing--right{animation:tekin-wave-right .95s cubic-bezier(.35,.1,.25,1) 1}
@keyframes tekin-flap-left{
  0%{transform:rotate(0deg)}
  28%{transform:rotate(-10deg)}
  52%{transform:rotate(4deg)}
  78%{transform:rotate(-5deg)}
  100%{transform:rotate(0deg)}
}
@keyframes tekin-flap-right{
  0%{transform:rotate(0deg)}
  28%{transform:rotate(10deg)}
  52%{transform:rotate(-4deg)}
  78%{transform:rotate(5deg)}
  100%{transform:rotate(0deg)}
}
@keyframes tekin-flap-left-strong{
  0%{transform:rotate(0deg)}
  26%{transform:rotate(-14deg)}
  48%{transform:rotate(6deg)}
  72%{transform:rotate(-7deg)}
  100%{transform:rotate(0deg)}
}
@keyframes tekin-flap-right-strong{
  0%{transform:rotate(0deg)}
  26%{transform:rotate(14deg)}
  48%{transform:rotate(-6deg)}
  72%{transform:rotate(7deg)}
  100%{transform:rotate(0deg)}
}
@keyframes tekin-wave-left{
  0%{transform:rotate(0deg)}
  35%{transform:rotate(-16deg)}
  70%{transform:rotate(-6deg)}
  100%{transform:rotate(0deg)}
}
@keyframes tekin-wave-right{
  0%{transform:rotate(0deg)}
  35%{transform:rotate(10deg)}
  70%{transform:rotate(3deg)}
  100%{transform:rotate(0deg)}
}

/* Manual / system pause freezes wing & blink classes too */
.atk-mascot.is-paused .atk-tekin-wing,
.atk-mascot.is-paused .atk-tekin-eyelid,
.atk-mascot.is-user-paused .atk-tekin-wing,
.atk-mascot.is-user-paused .atk-tekin-eyelid{
  animation:none!important;
}
.atk-mascot.is-user-paused .atk-tekin-wing{transform:none!important}
.atk-mascot.is-user-paused .atk-tekin-eyelid{opacity:0!important}

/* Inline SVG içindeki dekoratif yıldız/kıvılcımlar (circle) sırayla parıldar. */
.atk-mascot__art svg circle{transform-box:fill-box;transform-origin:center;animation:tekin-twinkle 2.2s ease-in-out infinite}
.atk-mascot__art svg circle:nth-of-type(2){animation-delay:.35s}
.atk-mascot__art svg circle:nth-of-type(3){animation-delay:.7s}
.atk-mascot__art svg circle:nth-of-type(4){animation-delay:1.05s}
.atk-mascot__art svg circle:nth-of-type(5){animation-delay:1.4s}
.atk-mascot__art svg circle:nth-of-type(6){animation-delay:1.75s}

.atk-mascot__copy{min-width:0}.atk-mascot__message{margin:0;color:var(--text)}.atk-mascot__stage{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}.atk-mascot__retry{margin-top:8px}
.atk-mascot[data-placement="corner"]{position:fixed;right:18px;bottom:18px;z-index:12;max-width:300px;padding:10px 14px;background:rgba(12,17,51,.94);border:1px solid var(--border);border-radius:16px;box-shadow:0 14px 36px rgba(0,0,0,.28);pointer-events:none}.atk-mascot[data-placement="corner"] .atk-mascot__retry{pointer-events:auto}
.atk-mascot[data-placement="modal"]{margin:20px auto;justify-content:center;text-align:left}.atk-mascot[data-placement="empty"]{margin:26px auto;justify-content:center}

/* Ekran dışı / arka planda / API hold: animasyonları duraklat (performans). */
.atk-mascot.is-paused .atk-mascot__art,.atk-mascot.is-paused .atk-mascot__art::before,.atk-mascot.is-paused .atk-mascot__art svg circle{animation-play-state:paused}
/* Kullanıcı manuel durdurdu: hareket tamamen kapanır; semantik görseller kalır. */
.atk-mascot.is-user-paused .atk-mascot__art,
.atk-mascot.is-user-paused .atk-mascot__art::before,
.atk-mascot.is-user-paused .atk-mascot__art svg circle{
  animation:none!important;
}
.atk-mascot.is-user-paused .atk-mascot__art{
  transform:none!important;
}
/* Tekin kendisi animasyon anahtarı — yalnızca sanat alanı tıklanır. */
.atk-mascot__art--toggle{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
  touch-action:manipulation;
}
.atk-mascot__art--toggle img,.atk-mascot__art--toggle svg{pointer-events:none;-webkit-user-drag:none}
.atk-mascot__art--toggle:focus-visible{
  outline:2px solid var(--gold-2,#e7b659);
  outline-offset:4px;
  border-radius:50%;
}
.atk-mascot__art--toggle.is-tap{transform:scale(.97);transition:transform .12s ease}
.atk-mascot__art--toggle[data-tooltip]{position:relative}
.atk-mascot__art--toggle[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  max-width:min(220px,70vw);
  padding:6px 10px;
  border-radius:10px;
  background:rgba(7,11,32,.92);
  border:1px solid rgba(231,182,89,.35);
  color:var(--text,#f4f0ff);
  font:500 .72rem/1.35 Inter,system-ui,sans-serif;
  white-space:normal;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
  z-index:4;
}
.atk-mascot__art--toggle:hover::after,
.atk-mascot__art--toggle:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.atk-mascot{position:relative}
.atk-mascot__pause-mark{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  font:600 .65rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.02em;
  color:var(--muted,#b9aef0);
  background:rgba(7,11,32,.72);
  border:1px solid rgba(185,174,240,.28);
  border-radius:999px;
  padding:2px 8px;
  pointer-events:none;
  z-index:3;
}
.atk-mascot__pause-mark[hidden]{display:none!important}

/* "Çalışıyor" durumları — aynı süzülme, daha hızlı ve belirgin + hale hızlanır. */
.atk-mascot[data-state="loading"] .atk-mascot__art,.atk-mascot[data-state="report_generating"] .atk-mascot__art,.atk-mascot[data-state="report_queued"] .atk-mascot__art,.atk-mascot[data-state="thinking"] .atk-mascot__art,.atk-mascot[data-state="progress"] .atk-mascot__art,.atk-mascot[data-state="payment_verifying"] .atk-mascot__art,.atk-mascot[data-state="payment_secure"] .atk-mascot__art,.atk-mascot[data-state="birth_chart_calculating"] .atk-mascot__art,.atk-mascot[data-state="astrocartography_mapping"] .atk-mascot__art,.atk-mascot[data-state="tarot_shuffling"] .atk-mascot__art,.atk-mascot[data-state="dream_interpreting"] .atk-mascot__art,.atk-mascot[data-state="palm_scanning"] .atk-mascot__art{animation-duration:2s}
.atk-mascot[data-state="loading"] .atk-mascot__art::before,.atk-mascot[data-state="report_generating"] .atk-mascot__art::before,.atk-mascot[data-state="report_queued"] .atk-mascot__art::before,.atk-mascot[data-state="thinking"] .atk-mascot__art::before,.atk-mascot[data-state="progress"] .atk-mascot__art::before,.atk-mascot[data-state="payment_verifying"] .atk-mascot__art::before,.atk-mascot[data-state="payment_secure"] .atk-mascot__art::before,.atk-mascot[data-state="birth_chart_calculating"] .atk-mascot__art::before,.atk-mascot[data-state="astrocartography_mapping"] .atk-mascot__art::before,.atk-mascot[data-state="tarot_shuffling"] .atk-mascot__art::before,.atk-mascot[data-state="dream_interpreting"] .atk-mascot__art::before,.atk-mascot[data-state="palm_scanning"] .atk-mascot__art::before{animation-duration:2s}

/* Başarı & kutlama — kısa zıplama, sonra sakin süzülmeye döner. */
.atk-mascot[data-state="success"] .atk-mascot__art,.atk-mascot[data-state="celebration"] .atk-mascot__art,.atk-mascot[data-state="report_ready"][data-celebrate="true"] .atk-mascot__art{animation:tekin-celebrate .78s cubic-bezier(.2,.9,.25,1),tekin-float 3.6s ease-in-out .78s infinite}
.atk-mascot[data-state="success"] .atk-mascot__art::before,.atk-mascot[data-state="celebration"] .atk-mascot__art::before,.atk-mascot[data-state="report_ready"][data-celebrate="true"] .atk-mascot__art::before{background:radial-gradient(circle at 50% 54%,rgba(231,182,89,.42),rgba(246,213,144,.20) 48%,transparent 72%)}

/* Hata / uyarı — sakin baş eğme, sonra süzülmeye döner; hale sönükleşir. */
.atk-mascot[data-state="error"] .atk-mascot__art,.atk-mascot[data-state="payment_failed"] .atk-mascot__art,.atk-mascot[data-state="warning"] .atk-mascot__art,.atk-mascot[data-state="offline"] .atk-mascot__art{animation:tekin-tilt .82s ease-out,tekin-float 3.6s ease-in-out .82s infinite}
.atk-mascot[data-state="error"] .atk-mascot__art::before,.atk-mascot[data-state="payment_failed"] .atk-mascot__art::before,.atk-mascot[data-state="offline"] .atk-mascot__art::before{background:radial-gradient(circle at 50% 54%,rgba(123,111,212,.20),transparent 68%)}

@keyframes tekin-float{0%,100%{transform:translateY(0) rotate(-1.3deg) scale(1)}50%{transform:translateY(-5px) rotate(1.3deg) scale(1.02)}}
@keyframes tekin-glow{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.07)}}
@keyframes tekin-twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes tekin-celebrate{0%{transform:none}28%{transform:translateY(-10px) scale(1.08) rotate(-2.5deg)}52%{transform:translateY(0) scale(1.02) rotate(1.8deg)}74%{transform:translateY(-4px) scale(1.03) rotate(-1deg)}100%{transform:none}}
@keyframes tekin-tilt{0%,100%{transform:rotate(0)}28%{transform:rotate(-4.5deg)}62%{transform:rotate(2.5deg)}}

/* Sahibin kararı: maskot marka kimliği gereği HER cihazda hareket eder — "hareketi
   azalt" ayarı açık olsa bile. Bu yüzden animasyonlar reduce-motion'da BASTIRILMAZ.
   (Hareket yine de küçük ve premium tutuldu: birkaç px süzülme + yumuşak ışık nabzı;
   büyük parallax/dönme yoktur.) prefers-reduced-motion yalnız geçişleri sadeleştirir. */
@media (prefers-reduced-motion:reduce){
  .atk-mascot{transition:none}
}
@media (max-width:520px){.atk-mascot[data-placement="corner"]{right:12px;bottom:12px;max-width:calc(100vw - 24px)}}