/* ==========================================================================
   MASKOT — "Dede Korkut" (assets/js/maskot.js üretir). Kitaplıksız CSS canlandırma.
   Kullanım: <span data-...> içine MeberraMaskot.html("sevincli", { boyut: 120 }) ya da MeberraMaskot.el(...)
   Sınıflar: .maskot  .maskot--<ifade>  .maskot--anim (canlı)  .maskot--bas (yalnız baş)
   Parçalar: .mk-hepsi (tüm figür) .mk-nefes .mk-kopuz .mk-bas-ic .mk-kulak .mk-goz .mk-kol-salla .mk-puskul .mk-z .mk-konfeti
   Canlandırılan parçalar transform-box: fill-box ile kendi kutularına göre döner (her viewBox'ta çalışır).
   Not: transform özniteliği taşıyan (poz) gruplarına fill-box verilmez; canlandırma hep iç grupta yapılır.
   Azaltılmış hareket: hiç canlandırma yok, poz durağan kalır.
   ========================================================================== */

.maskot { display: inline-block; vertical-align: middle; overflow: visible; flex: none; }
.maskot-kap { display: inline-flex; line-height: 0; }

/* Koyu temada figür zemine karışmasın: çok hafif aydınlık hale */
:root[data-theme="dark"] .maskot:not(.maskot--tek) { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .18)) drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .maskot:not(.maskot--tek) { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .18)) drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
}
.maskot--bas { filter: none !important; }

/* --- Dönme noktaları ------------------------------------------------------------------- */
/* fill-box yalnızca canlandırılan parçalarda */
.maskot .mk-hepsi, .maskot .mk-nefes, .maskot .mk-bas-ic, .maskot .mk-goz, .maskot .mk-kopuz, .maskot .mk-kulak,
.maskot .mk-kol-salla, .maskot .mk-kol-sol, .maskot .mk-kol-sag, .maskot .mk-puskul, .maskot .mk-z, .maskot .mk-dusunce > * { transform-box: fill-box; }
.maskot .mk-hepsi { transform-origin: 50% 100%; }
.maskot .mk-nefes { transform-origin: 50% 100%; }
.maskot .mk-bas-ic { transform-origin: 50% 90%; }
.maskot .mk-goz { transform-origin: 50% 55%; }
.maskot .mk-kopuz { transform-origin: 70% 90%; }
.maskot .mk-kulak { transform-origin: 75% 90%; }
.maskot .mk-kol-salla { transform-origin: 0% 100%; }
.maskot .mk-kol-sol { transform-origin: 100% 0%; }
.maskot .mk-kol-sag { transform-origin: 0% 0%; }
.maskot .mk-puskul { transform-origin: 0% 0%; }

/* --- Boşta: göz kırpma, nefes, kopuz (üzerine gelince) ------------------- */
@keyframes mk-kirp { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@keyframes mk-nefes { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-1.5%) scale(1.012, .992); } }
@keyframes mk-kulak { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-9deg); } 92% { transform: rotate(3deg); } 94% { transform: rotate(0); } }
@keyframes mk-kopuz { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(4deg); } }
@keyframes mk-puskul { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }

.maskot--anim .mk-goz { animation: mk-kirp 5.2s linear infinite; animation-delay: var(--mk-gecikme, 0s); }
.maskot--anim .mk-nefes { animation: mk-nefes 3.4s ease-in-out infinite; }
.maskot--anim .mk-puskul { animation: mk-puskul 3.4s ease-in-out infinite; }
.maskot--anim:hover .mk-kopuz,
.mk-konus:hover .maskot--anim .mk-kopuz { animation: mk-kopuz .7s ease-in-out 2; }
.maskot--bas.maskot--anim .mk-kulak-sol { animation: none; }

/* --- İfadeye özel ---------------------------------------------------------------------- */
/* kutlama: zıpla + kolları salla + konfeti parıltısı */
@keyframes mk-zipla {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(0) scale(1.06, .92); }
  40% { transform: translateY(-9%) scale(.97, 1.04); }
  62% { transform: translateY(0) scale(1.04, .95); }
  76% { transform: translateY(0) scale(1, 1); }
}
@keyframes mk-kol-sol { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes mk-kol-sag { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes mk-konfeti { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.maskot--kutlama.maskot--anim .mk-hepsi { animation: mk-zipla 1.1s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.maskot--kutlama.maskot--anim .mk-nefes { animation: none; }
.maskot--kutlama.maskot--anim .mk-kol-sol { animation: mk-kol-sol .55s ease-in-out infinite; }
.maskot--kutlama.maskot--anim .mk-kol-sag { animation: mk-kol-sag .55s ease-in-out infinite; }
.maskot--kutlama.maskot--anim .mk-konfeti > * { animation: mk-konfeti 1.1s ease-in-out infinite; }
.maskot--kutlama.maskot--anim .mk-konfeti > :nth-child(2n) { animation-delay: -.5s; }

/* selam: el sallama */
@keyframes mk-salla { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-14deg); } 80% { transform: rotate(4deg); } }
@keyframes mk-iz { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
.maskot--selam.maskot--anim .mk-kol-salla { animation: mk-salla 1.6s ease-in-out infinite; }
.maskot--selam.maskot--anim .mk-selam-iz { animation: mk-iz 1.6s ease-in-out infinite; }

/* dusunen: hafif baş eğme + düşünce noktaları */
@keyframes mk-egil { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes mk-nokta { 0%, 100% { opacity: .35; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }
.maskot--dusunen.maskot--anim .mk-bas-ic { animation: mk-egil 3.6s ease-in-out infinite; }
.maskot--dusunen.maskot--anim .mk-dusunce > * { transform-origin: 50% 50%; animation: mk-nokta 1.8s ease-in-out infinite; }
.maskot--dusunen.maskot--anim .mk-nokta1 { animation-delay: .25s; }
.maskot--dusunen.maskot--anim .mk-nokta2 { animation-delay: .5s; }

/* uykulu: yavaş sallanma + yükselen "z" balonları */
@keyframes mk-sallan { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes mk-z { 0% { opacity: 0; transform: translate(-6px, 8px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -10px) scale(1.05); } }
.maskot--uykulu.maskot--anim .mk-hepsi { animation: mk-sallan 4.2s ease-in-out infinite; }
.maskot--uykulu.maskot--anim .mk-goz { animation: none; }
.maskot--uykulu.maskot--anim .mk-z { transform-origin: 50% 50%; animation: mk-z 3s ease-in-out infinite; opacity: 0; }
.maskot--uykulu.maskot--anim .mk-z1 { animation-delay: 1s; }
.maskot--uykulu.maskot--anim .mk-z2 { animation-delay: 2s; }

/* uzgun: daha yavaş, yumuşak nefes */
.maskot--uzgun.maskot--anim .mk-nefes { animation-duration: 4.6s; }
.maskot--uzgun.maskot--anim .mk-kulak-sol { animation: none; }

/* --- Konuşma balonu (boş durumlar, ipuçları, seri uyarısı) ------------------------------- */
.mk-konus { display: flex; align-items: flex-end; gap: 10px; max-width: 520px; }
.mk-konus__maskot { flex: none; line-height: 0; }
.mk-balon {
  position: relative; display: flex; align-items: flex-start; gap: 6px;
  background: var(--surface, #fff); color: var(--text, #1a1033);
  border: 1.5px solid var(--border-strong, #cec7e3); border-radius: 18px 18px 18px 6px;
  padding: 12px 14px; margin-bottom: 22px; box-shadow: var(--shadow-card, 0 6px 20px rgba(91, 61, 245, .06));
  font: 500 var(--fs-16, 1rem)/1.45 var(--font-sans, system-ui, sans-serif);
}
.mk-balon::before {
  content: ""; position: absolute; left: -9px; bottom: 10px; width: 14px; height: 14px;
  background: inherit; border-left: 1.5px solid var(--border-strong, #cec7e3); border-bottom: 1.5px solid var(--border-strong, #cec7e3);
  transform: rotate(45deg); border-radius: 0 0 0 4px;
}
.mk-balon__metin { margin: 0; text-wrap: pretty; }
.mk-balon__ad { font-family: var(--font-head, sans-serif); font-weight: 800; color: var(--energy-text, #c2410c); }
.mk-balon__kapat {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted, #5e5873); cursor: pointer;
}
.mk-balon__kapat:hover { background: var(--surface-3, #f1eefa); color: var(--text, #1a1033); }
.mk-balon__kapat:focus-visible { outline: 2px solid var(--accent, #5b3df5); outline-offset: 2px; }
@media (max-width: 420px) { .mk-konus .maskot { width: 72px; height: 72px; } }

@media (prefers-reduced-motion: reduce) {
  .maskot *, .maskot--anim * { animation: none !important; }
  .maskot--uykulu .mk-z { opacity: 1 !important; }
}