/* Maskot makyaj */
/* Makyaj nefes */
.mascot-theme-root[data-mascot-makeup="blush"] .mascot-cos-makeup,
.mascot-theme-root[data-mascot-makeup="cute"] .mascot-cos-makeup {
  animation: mcos-makeup-pulse 5s ease-in-out infinite;
}
.mascot-theme-root[data-mascot-makeup="glow"] .mascot-cos-makeup {
  animation: mcos-makeup-glow 4.5s ease-in-out infinite;
}
.mascot-theme-root[data-mascot-makeup="sparkle"] .mascot-cos-makeup {
  animation: mcos-makeup-sparkle 3.2s ease-in-out infinite;
}

.mascot-theme-root .mascot-cos-hat {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 10px);
  transform: translateX(-50%);
  width: 40px;
  height: 14px;
  border-radius: 12px 12px 4px 4px;
  --hat: var(--cos-hat-color, #3d3550);
  background: var(--hat);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow: none;
  overflow: visible;
}
.mascot-theme-root .mascot-cos-hat::before,
.mascot-theme-root .mascot-cos-hat::after {
  content: none;
  position: absolute;
  pointer-events: none;
}
.mascot-theme-root[data-mascot-hat]:not([data-mascot-hat="none"]) .mascot-cos-hat {
  opacity: 1;
  animation: mcos-hat-float 5.5s ease-in-out infinite;
}
.mascot-theme-root[data-mascot-hat="cap"] .mascot-cos-hat {
  --hat: var(--cos-hat-color, #1e3a5f);
  width: 34px;
  height: 13px;
  border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hat) 72%, #fff), var(--hat));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--hat) 55%, #000);
}
.mascot-theme-root[data-mascot-hat="cap"] .mascot-cos-hat::before {
  content: "";
  left: 50%;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--hat) 45%, #fff);
}
.mascot-theme-root[data-mascot-hat="cap"] .mascot-cos-hat::after {
  content: "";
  left: 62%;
  top: 7px;
  width: 18px;
  height: 5px;
  border-radius: 0 6px 5px 0;
  background: color-mix(in srgb, var(--hat) 78%, #000);
  transform: rotate(-7deg);
}
.mascot-theme-root[data-mascot-hat="beanie"] .mascot-cos-hat {
  --hat: var(--cos-hat-color, #3f3d56);
  width: 40px;
  height: 16px;
  bottom: calc(100% - 8px);
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hat) 78%, #fff), var(--hat));
}
.mascot-theme-root[data-mascot-hat="beanie"] .mascot-cos-hat::before {
  content: "";
  left: 50%;
  top: -7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--hat) 40%, #fff), var(--hat));
}
.mascot-theme-root[data-mascot-hat="beanie"] .mascot-cos-hat::after {
  content: "";
  left: -1px;
  right: -1px;
  bottom: 0;
  height: 5px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--hat) 70%, #000) 0 3px,
    color-mix(in srgb, var(--hat) 85%, #fff) 3px 6px
  );
}
.mascot-theme-root[data-mascot-hat="tophat"] .mascot-cos-hat {
  --hat: var(--cos-hat-color, #1c1917);
  width: 24px;
  height: 20px;
  bottom: calc(100% - 8px);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--hat) 55%, #000),
    var(--hat) 42%,
    color-mix(in srgb, var(--hat) 70%, #000)
  );
}
.mascot-theme-root[data-mascot-hat="tophat"] .mascot-cos-hat::before {
  content: "";
  left: 0;
  right: 0;
  bottom: 3px;
  height: 4px;
  background: color-mix(in srgb, var(--hat) 28%, #e7d3a1);
}
.mascot-theme-root[data-mascot-hat="tophat"] .mascot-cos-hat::after {
  content: "";
  left: 50%;
  bottom: -3px;
  width: 42px;
  height: 6px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--hat) 72%, #000);
}
.mascot-theme-root[data-mascot-hat="crown"] .mascot-cos-hat {
  --hat: var(--cos-hat-color, #c4a35a);
  width: 40px;
  height: 16px;
  bottom: calc(100% - 8px);
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 78%, color-mix(in srgb, var(--hat) 20%, #fff) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--hat) 15%, #fff) 0 1.6px, transparent 2px),
    radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--hat) 20%, #fff) 0 1.4px, transparent 1.8px),
    linear-gradient(180deg, color-mix(in srgb, var(--hat) 62%, #fff), var(--hat));
  clip-path: polygon(
    0% 100%,
    0% 58%,
    14% 58%,
    20% 6%,
    30% 58%,
    40% 58%,
    50% 0%,
    60% 58%,
    70% 58%,
    80% 6%,
    86% 58%,
    100% 58%,
    100% 100%
  );
}
.mascot-theme-root[data-mascot-hat="headband"] .mascot-cos-hat {
  --hat: var(--cos-hat-color, #9f1239);
  width: 48px;
  height: 6px;
  bottom: calc(100% - 20px);
  border-radius: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hat) 75%, #fff), var(--hat));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}
.mascot-theme-root[data-mascot-hat="headband"] .mascot-cos-hat::before {
  content: "";
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--hat);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hat) 40%, #fff);
}
.mascot-theme-root[data-mascot-hat="cat"] .mascot-cos-hat {
  --hat: var(--cos-hat-color, #292524);
  width: 46px;
  height: 16px;
  bottom: calc(100% - 6px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.mascot-theme-root[data-mascot-hat="cat"] .mascot-cos-hat::before,
.mascot-theme-root[data-mascot-hat="cat"] .mascot-cos-hat::after {
  content: "";
  bottom: 0;
  width: 14px;
  height: 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--hat) 48%, #fff) 0 38%,
    var(--hat) 38%
  );
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.mascot-theme-root[data-mascot-hat="cat"] .mascot-cos-hat::before {
  left: 3px;
}
.mascot-theme-root[data-mascot-hat="cat"] .mascot-cos-hat::after {
  right: 3px;
}
.mascot-theme-root[data-mascot-hat="party"] .mascot-cos-hat {
  --hat: var(--cos-hat-color, #be123c);
  width: 22px;
  height: 30px;
  bottom: calc(100% - 4px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%) rotate(-10deg);
}
.mascot-theme-root[data-mascot-hat="party"] .mascot-cos-hat::before {
  content: "";
  left: 2px;
  top: 6px;
  width: 18px;
  height: 24px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(
    118deg,
    var(--hat) 0 4px,
    color-mix(in srgb, var(--hat) 42%, #fff) 4px 7px
  );
}
.mascot-theme-root[data-mascot-hat="party"] .mascot-cos-hat::after {
  content: "";
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #fff, color-mix(in srgb, var(--hat) 35%, #fff));
}
.mascot-theme-root[data-mascot-hat="wizard"] .mascot-cos-hat {
  --hat: var(--cos-hat-color, #312e81);
  width: 40px;
  height: 32px;
  bottom: calc(100% - 6px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.mascot-theme-root[data-mascot-hat="wizard"] .mascot-cos-hat::before {
  content: "";
  left: 50%;
  top: 0;
  width: 24px;
  height: 26px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, transparent 0 68%, color-mix(in srgb, var(--hat) 22%, #e7d3a1) 68% 80%, transparent 80%),
    linear-gradient(180deg, color-mix(in srgb, var(--hat) 70%, #fff), var(--hat));
}
.mascot-theme-root[data-mascot-hat="wizard"] .mascot-cos-hat::after {
  content: "";
  left: 0;
  bottom: 0;
  width: 40px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hat) 72%, #000);
}

.mascot-theme-root .mascot-cos-outfit {
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  transform: translateX(-50%);
  width: 36px;
  height: 10px;
  --fit: var(--cos-outfit-color, #334155);
  background: transparent;
  border: 0;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.mascot-theme-root .mascot-cos-outfit::before,
.mascot-theme-root .mascot-cos-outfit::after {
  content: none;
  position: absolute;
  pointer-events: none;
}
.mascot-theme-root[data-mascot-outfit]:not([data-mascot-outfit="none"]) .mascot-cos-outfit {
  opacity: 1;
  animation: mcos-outfit-sway 6s ease-in-out infinite;
}
.mascot-theme-root[data-mascot-outfit="bowtie"] .mascot-cos-outfit {
  --fit: var(--cos-outfit-color, #1e1b4b);
  width: 6px;
  height: 6px;
  top: calc(100% + 1px);
  border-radius: 1px;
  background: color-mix(in srgb, var(--fit) 75%, #000);
}
.mascot-theme-root[data-mascot-outfit="bowtie"] .mascot-cos-outfit::before,
.mascot-theme-root[data-mascot-outfit="bowtie"] .mascot-cos-outfit::after {
  content: "";
  top: 50%;
  width: 11px;
  height: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fit) 68%, #fff), var(--fit));
}
.mascot-theme-root[data-mascot-outfit="bowtie"] .mascot-cos-outfit::before {
  right: 5px;
  transform: translateY(-50%);
  clip-path: polygon(0 0, 100% 26%, 100% 74%, 0 100%);
}
.mascot-theme-root[data-mascot-outfit="bowtie"] .mascot-cos-outfit::after {
  left: 5px;
  transform: translateY(-50%);
  clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 74%);
}
.mascot-theme-root[data-mascot-outfit="necktie"] .mascot-cos-outfit {
  --fit: var(--cos-outfit-color, #1e3a5f);
  width: 14px;
  height: 26px;
  top: calc(100% - 2px);
  border-radius: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--fit) 45%, #000) 0%,
    color-mix(in srgb, var(--fit) 78%, #fff) 46%,
    var(--fit) 54%,
    color-mix(in srgb, var(--fit) 40%, #000) 100%
  );
  clip-path: polygon(24% 0, 76% 0, 100% 18%, 64% 18%, 70% 100%, 30% 100%, 36% 18%, 0 18%);
}
.mascot-theme-root[data-mascot-outfit="scarf"] .mascot-cos-outfit {
  --fit: var(--cos-outfit-color, #9f1239);
  width: 46px;
  height: 8px;
  top: calc(100% - 4px);
  border-radius: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--fit) 0 7px,
    color-mix(in srgb, var(--fit) 62%, #000) 7px 9px
  );
}
.mascot-theme-root[data-mascot-outfit="scarf"] .mascot-cos-outfit::after {
  content: "";
  right: 7px;
  top: 5px;
  width: 8px;
  height: 14px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, var(--fit), color-mix(in srgb, var(--fit) 48%, #000));
}
.mascot-theme-root[data-mascot-outfit="badge"] .mascot-cos-outfit {
  --fit: var(--cos-outfit-color, #b45309);
  width: 14px;
  height: 14px;
  top: calc(100% + 3px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--fit) 20%, #fff) 0 2px, transparent 2.6px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fit) 45%, #fff) 0 3px, var(--fit) 3.5px 6px, color-mix(in srgb, var(--fit) 40%, #000) 6.5px);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--fit) 25%, #fff),
    0 1px 2px rgba(0, 0, 0, 0.22);
}
.mascot-theme-root[data-mascot-outfit="badge"] .mascot-cos-outfit::before {
  content: "";
  left: 50%;
  bottom: 11px;
  width: 10px;
  height: 5px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--fit) 65%, #000) 0 42%,
    color-mix(in srgb, var(--fit) 18%, #fff) 42% 58%,
    color-mix(in srgb, var(--fit) 65%, #000) 58%
  );
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}
.mascot-theme-root[data-mascot-outfit="collar"] .mascot-cos-outfit {
  --fit: var(--cos-outfit-color, #f8fafc);
  width: 38px;
  height: 11px;
  top: calc(100% - 6px);
  background: transparent;
  box-shadow: none;
}
.mascot-theme-root[data-mascot-outfit="collar"] .mascot-cos-outfit::before,
.mascot-theme-root[data-mascot-outfit="collar"] .mascot-cos-outfit::after {
  content: "";
  top: 0;
  width: 18px;
  height: 11px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fit) 30%, #fff), var(--fit));
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--fit) 55%, #94a3b8);
}
.mascot-theme-root[data-mascot-outfit="collar"] .mascot-cos-outfit::before {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 58% 100%, 0 72%);
}
.mascot-theme-root[data-mascot-outfit="collar"] .mascot-cos-outfit::after {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 42% 100%);
}
.mascot-theme-root[data-mascot-outfit="pearls"] .mascot-cos-outfit {
  --fit: var(--cos-outfit-color, #e7d3b0);
  width: 42px;
  height: 8px;
  top: calc(100% + 1px);
  border-radius: 0;
  background-color: transparent;
  background-image: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--fit) 22%, #fff) 0 2px,
    var(--fit) 2.2px 3.1px,
    transparent 3.4px
  );
  background-size: 8px 8px;
  background-repeat: repeat-x;
  background-position: center;
}
.mascot-theme-root[data-mascot-outfit="ribbon"] .mascot-cos-outfit {
  --fit: var(--cos-outfit-color, #9f1239);
  width: 22px;
  height: 16px;
  top: calc(100% - 2px);
  background:
    radial-gradient(ellipse 7px 5px at 5px 5px, var(--fit) 68%, transparent 71%),
    radial-gradient(ellipse 7px 5px at 17px 5px, var(--fit) 68%, transparent 71%);
}
.mascot-theme-root[data-mascot-outfit="ribbon"] .mascot-cos-outfit::before {
  content: "";
  left: 50%;
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--fit) 62%, #000);
}
.mascot-theme-root[data-mascot-outfit="ribbon"] .mascot-cos-outfit::after {
  content: "";
  left: 50%;
  top: 7px;
  width: 12px;
  height: 9px;
  transform: translateX(-50%);
  background: var(--fit);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 68% 100%, 50% 32%, 32% 100%, 0 100%);
}
.mascot-theme-root[data-mascot-outfit="vest"] .mascot-cos-outfit {
  --fit: var(--cos-outfit-color, #334155);
  width: 38px;
  height: 16px;
  top: calc(100% - 1px);
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(
    90deg,
    var(--fit) 0 40%,
    color-mix(in srgb, var(--fit) 28%, #0f172a) 40% 60%,
    var(--fit) 60% 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--fit) 35%, #fff),
    inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
.mascot-theme-root[data-mascot-outfit="vest"] .mascot-cos-outfit::before {
  content: "";
  left: 50%;
  top: 3px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fit) 15%, #f8fafc);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--fit) 15%, #f8fafc);
}

/* ——— Kozmetik animasyonları ——— */
@keyframes mcos-eye-soft-blink {
  0%, 44%, 48%, 100% {
    opacity: 1;
  }
  46%, 47% {
    opacity: 0.08;
  }
}
@keyframes mcos-eye-sparkle {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}
@keyframes mcos-eye-anime {
  0%, 100% {
    filter: saturate(1.05);
  }
  50% {
    filter: saturate(1.2) brightness(1.05);
  }
}
@keyframes mcos-eye-sleepy {
  0%, 100% {
    transform: scaleY(0.55);
  }
  50% {
    transform: scaleY(0.48);
  }
}
@keyframes mcos-eye-wink-r {
  0%, 78%, 100% {
    transform: scaleY(0.12);
  }
  86%, 92% {
    transform: scaleY(1);
  }
}
@keyframes mcos-eye-shy {
  0%, 100% {
    transform: scaleX(0.78) translateX(0);
    opacity: 1;
  }
  50% {
    transform: scaleX(0.72) translateX(0.5px);
    opacity: 0.88;
  }
}
@keyframes mcos-eye-big {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}
@keyframes mcos-eye-star {
  0%, 100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(12deg);
  }
}
@keyframes mcos-eye-glow {
  0%, 100% {
    box-shadow:
      inset 0 -1px 1px rgba(0, 0, 0, 0.1),
      0 0 8px rgba(255, 255, 255, 0.85),
      0 0 14px rgba(168, 85, 247, 0.35);
  }
  50% {
    box-shadow:
      inset 0 -1px 1px rgba(0, 0, 0, 0.1),
      0 0 12px rgba(255, 255, 255, 0.95),
      0 0 20px rgba(168, 85, 247, 0.5);
  }
}
@keyframes mcos-eye-retro {
  0%, 40%, 44%, 100% {
    opacity: 1;
  }
  42%, 43% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes mcos-brow-lift-l {
  0%, 100% {
    transform: rotate(-4deg) translateY(0);
  }
  50% {
    transform: rotate(-4deg) translateY(-2px);
  }
}
@keyframes mcos-brow-lift-r {
  0%, 100% {
    transform: rotate(4deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-2px);
  }
}
@keyframes mcos-brow-soft {
  0%, 100% {
    opacity: 0.75;
    filter: blur(0.4px);
  }
  50% {
    opacity: 0.9;
    filter: blur(0.2px);
  }
}
@keyframes mcos-brow-arch-l {
  0%, 100% {
    transform: rotate(-6deg) translateY(0);
  }
  50% {
    transform: rotate(-4deg) translateY(-1.5px);
  }
}
@keyframes mcos-brow-arch-r {
  0%, 100% {
    transform: rotate(6deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-1.5px);
  }
}
@keyframes mcos-brow-thick {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}
@keyframes mcos-brow-wispy-l {
  0%, 100% {
    transform: rotate(-16deg) translateY(0);
  }
  50% {
    transform: rotate(-18deg) translateY(-1px);
  }
}
@keyframes mcos-brow-wispy-r {
  0%, 100% {
    transform: rotate(16deg) translateY(0);
  }
  50% {
    transform: rotate(18deg) translateY(-1px);
  }
}
@keyframes mcos-brow-bold {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}
@keyframes mcos-brow-angry-l {
  0%, 100% {
    transform: rotate(-26deg) translateY(2px);
  }
  50% {
    transform: rotate(-30deg) translateY(1px);
  }
}
@keyframes mcos-brow-angry-r {
  0%, 100% {
    transform: rotate(26deg) translateY(2px);
  }
  50% {
    transform: rotate(30deg) translateY(1px);
  }
}
@keyframes mcos-brow-straight {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}
@keyframes mcos-brow-curved {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}

@keyframes mcos-nose-wiggle {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  25% {
    transform: translateX(calc(-50% + 0.8px)) translateY(0.5px);
  }
  75% {
    transform: translateX(calc(-50% - 0.8px)) translateY(0.5px);
  }
}
@keyframes mcos-nose-bounce {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.06);
  }
}
@keyframes mcos-nose-tilt {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(-3deg);
  }
}

@keyframes mcos-ear-sway {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(-50%) rotate(8deg);
  }
}
@keyframes mcos-ear-hoop {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(-50%) rotate(-14deg);
  }
}
@keyframes mcos-ear-drop {
  0%, 100% {
    transform: translateY(-50%) translateY(0);
  }
  50% {
    transform: translateY(-50%) translateY(2px);
  }
}
@keyframes mcos-ear-heart {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.08);
  }
}

@keyframes mcos-makeup-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}
@keyframes mcos-makeup-glow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}
@keyframes mcos-makeup-sparkle {
  0%, 100% {
    opacity: 1;
  }
  40% {
    opacity: 0.85;
  }
  60% {
    opacity: 0.95;
  }
}

@keyframes mcos-stache-silk {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scaleX(1);
  }
  50% {
    transform: translateX(-50%) translateY(-0.5px) scaleX(1.04);
  }
}
@keyframes mcos-stache-gentle {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.05);
    opacity: 0.92;
  }
}
@keyframes mcos-stache-twirl {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(-2.5deg);
  }
}
@keyframes mcos-stache-dapper {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-1px);
  }
}
@keyframes mcos-stache-velvet {
  0%, 100% {
    transform: translateX(-50%) scaleY(1);
  }
  50% {
    transform: translateX(-50%) scaleY(1.08);
  }
}
@keyframes mcos-stache-painter {
  0%, 100% {
    transform: translateX(-50%) rotate(-4deg) translateY(0);
  }
  50% {
    transform: translateX(-50%) rotate(-6deg) translateY(-1px);
  }
}
@keyframes mcos-stache-crescent {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(1px);
  }
}
@keyframes mcos-stache-film {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}
@keyframes mcos-stache-sombrero {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(1.5deg);
  }
}

@keyframes mcos-mouth-beam {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}
@keyframes mcos-mouth-soft {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
  }
  50% {
    transform: translateX(-50%) scaleX(1.06);
  }
}
@keyframes mcos-mouth-laugh {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05, 1.12);
  }
}
@keyframes mcos-mouth-smitten {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.08);
  }
}
@keyframes mcos-mouth-playful {
  0%, 100% {
    transform: translateX(-48%) rotate(-10deg);
  }
  50% {
    transform: translateX(-48%) rotate(-14deg) translateY(0.5px);
  }
}
@keyframes mcos-mouth-tiny {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
}
@keyframes mcos-mouth-pout {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(1px);
  }
}
@keyframes mcos-mouth-cool {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-0.5px);
  }
}
@keyframes mcos-mouth-dreamy {
  0%, 100% {
    filter: brightness(1) blur(0);
  }
  50% {
    filter: brightness(1.06) blur(0.2px);
  }
}

@keyframes mcos-hair-sway {
  0%,
  100% {
    transform: translateX(-50%) rotate(-0.8deg) scaleX(1);
  }
  50% {
    transform: translateX(-50%) rotate(0.8deg) scaleX(1.02);
  }
}
@keyframes mcos-hair-braid {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(0.6px);
  }
}
@keyframes mcos-hair-wave {
  0%,
  100% {
    border-radius: 55% 45% 48% 52%;
  }
  50% {
    border-radius: 48% 52% 52% 48%;
  }
}
@keyframes mcos-hair-afro {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.03);
  }
}
@keyframes mcos-hair-curly {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}

@keyframes mcos-hat-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -1px;
  }
}
@keyframes mcos-outfit-sway {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(-2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-theme-root .cust-empty-eye,
  .mascot-theme-root .mascot-cos-brow,
  .mascot-theme-root .mascot-cos-stache,
  .mascot-theme-root .mascot-cos-mouth,
  .mascot-theme-root .mascot-cos-nose,
  .mascot-theme-root .mascot-cos-ear,
  .mascot-theme-root .mascot-cos-hat,
  .mascot-theme-root .mascot-cos-outfit,
  .mascot-theme-root .mascot-cos-makeup,
  .mascot-theme-root .mascot-cos-hair {
    animation: none !important;
  }
}

.cust-empty-blob {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 4px auto 0;
  border-radius: 58% 42% 62% 38% / 48% 55% 45% 52%;
  clip-path: none;
  /* Tonlar --m-* değişkenleriyle (ayarlardan ana renk + gradient) */
  background: linear-gradient(
    145deg,
    var(--m-c0, hsl(var(--m-d0, 310), 88%, 94%)) 0%,
    var(--m-c1, hsl(var(--m-d1, 334), 82%, 72%)) 32%,
    var(--m-c2, hsl(var(--m-d2, 2), 78%, 58%)) 62%,
    var(--m-c3, hsl(var(--m-d3, 28), 74%, 48%)) 100%
  );
  /* Dış hale / glow yok — düz disk görünümü */
  box-shadow: inset 0 2px 14px rgba(255, 255, 255, 0.42);
  animation: cust-empty-blob-morph 9s ease-in-out infinite;
  pointer-events: none;
  transition: background 0.6s ease, filter 0.6s ease, border-radius 0.35s ease, clip-path 0.35s ease;
}
.mascot-theme-root[data-mascot-shape]:not([data-mascot-shape="blob"]) .cust-empty-blob {
  animation: none;
}
.mascot-theme-root[data-mascot-shape="circle"] .cust-empty-blob {
  border-radius: 50%;
}
.mascot-theme-root[data-mascot-shape="square"] .cust-empty-blob {
  border-radius: 12px;
}
.mascot-theme-root[data-mascot-shape="squircle"] .cust-empty-blob {
  border-radius: 28%;
}
.mascot-theme-root[data-mascot-shape="pill"] .cust-empty-blob {
  border-radius: 999px;
  width: 52px;
  height: 70px;
}
.mascot-theme-root[data-mascot-shape="hex"] .cust-empty-blob {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.mascot-theme-root[data-mascot-shape="diamond"] .cust-empty-blob {
  border-radius: 2px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.mascot-theme-root[data-mascot-shape="star"] .cust-empty-blob {
  border-radius: 0;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}
.mascot-theme-root[data-mascot-shape="heart"] .cust-empty-blob {
  border-radius: 0;
  clip-path: polygon(50% 92%, 6% 42%, 8% 22%, 24% 8%, 40% 8%, 50% 22%, 60% 8%, 76% 8%, 92% 22%, 94% 42%);
}
.mascot-theme-root[data-mascot-shape="droplet"] .cust-empty-blob {
  border-radius: 0;
  clip-path: polygon(50% 0%, 82% 32%, 100% 58%, 80% 100%, 20% 100%, 0% 58%, 18% 32%);
}
.mascot-theme-root[data-mascot-shape="ring"] .cust-empty-blob {
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.35),
    inset 0 2px 12px rgba(255, 255, 255, 0.25);
  background: conic-gradient(
    from 120deg,
    var(--m-c0, hsl(var(--m-d0, 310), 78%, 62%)),
    var(--m-c2, hsl(var(--m-d2, 2), 72%, 52%)),
    var(--m-c0, hsl(var(--m-d0, 310), 78%, 62%))
  );
}