/* Ana Maskot */
   .mascot-container {
       position: fixed;
       bottom: 20px;
       right: 20px;
       z-index: 1000;
   }

   /* Sohbet Balonu */
   .speech-bubble {
       position: absolute;
       bottom: 120px;
       right: 0;
       background: white;
       border: 2px solid black;
       border-radius: 15px;
       padding: 10px 15px;
       max-width: 200px;
       min-width: 150px;
       text-align: center;
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
       opacity: 0;
       transform: translateY(10px);
       transition: all 0.3s ease;
   }

   .speech-bubble:after {
       content: '';
       position: absolute;
       bottom: -10px;
       right: 20px;
       border-width: 10px 10px 0;
       border-style: solid;
       border-color: white transparent;
   }

   .speech-bubble:before {
       content: '';
       position: absolute;
       bottom: -13px;
       right: 19px;
       border-width: 11px 11px 0;
       border-style: solid;
       border-color: black transparent;
       z-index: -1;
   }

   .speech-bubble.visible {
       opacity: 1;
       transform: translateY(0);
   }

   /* Ana Maskot */
   .mascot {
       position: fixed;
       bottom: 20px;
       right: 20px;
       width: 100px;
       height: 100px;
       border-radius: 50%;
       background: white;
       border: 3px solid black;
       box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       z-index: 1000;
       transition: transform 0.2s;
   }

   /* Kulaklar */
   .ear {
       position: absolute;
       width: 25px;
       height: 25px;
       border-radius: 50%;
       background: white;
       border: 3px solid black;
       z-index: -1;
   }

   .ear.left {
       top: -10px;
       left: 10px;
   }

   .ear.right {
       top: -10px;
       right: 10px;
   }

   /* Kulak içi (siyah) */
   .ear::after {
       content: "";
       position: absolute;
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: black;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   /* Yüz */
   .face {
       position: relative;
       width: 60%;
       height: 60%;
   }

   /* Gözler (kırmızı) */
   .eyes {
       display: flex;
       justify-content: space-between;
       position: relative;
   }

   .eye {
       width: 14px;
       height: 14px;
       background: red;
       border-radius: 50%;
       position: absolute;
       transition: transform 0.1s;
   }

   .eye.left {
       left: 0;
   }

   .eye.right {
       right: 0;
   }

   /* Ağız */
   .mouth {
       width: 25px;
       height: 8px;
       background: black;
       margin: 25px auto 0;
       border-radius: 0 0 8px 8px;
       transition: all 0.3s;
   }

   /* Eller */
   .arm {
       position: absolute;
       width: 20px;
       height: 30px;
       background: white;
       border: 3px solid black;
       border-radius: 10px;
       bottom: -15px;
       z-index: -1;
       transform-origin: top center;
   }

   .arm.left {
       left: 15px;
   }

   .arm.right {
       right: 15px;
   }

   /* Animasyonlar */
   @keyframes wave-right {

       0%,
       100% {
           transform: rotate(0deg);
       }

       25% {
           transform: rotate(-60deg);
       }

       75% {
           transform: rotate(30deg);
       }
   }

   @keyframes wave-left {

       0%,
       100% {
           transform: rotate(0deg);
       }

       25% {
           transform: rotate(60deg);
       }

       75% {
           transform: rotate(-30deg);
       }
   }

   @keyframes jump {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-20px);
       }
   }

   @keyframes mouth-whistle {

       0%,
       100% {
           height: 8px;
           border-radius: 0 0 8px 8px;
       }

       50% {
           height: 4px;
           width: 20px;
           border-radius: 50%;
           transform: translateY(4px);
       }
   }

   @keyframes mouth-talk {

       0%,
       100% {
           height: 8px;
       }

       25% {
           height: 4px;
       }

       50% {
           height: 12px;
       }

       75% {
           height: 6px;
       }
   }

   @keyframes mouth-smile {
       0% {
           height: 8px;
           border-radius: 0 0 8px 8px;
       }

       100% {
           height: 12px;
           border-radius: 0 0 12px 12px;
       }
   }