.tabcont {
    width: 100%;
    flex-direction: column;
    display: flex;
	    max-width: 1200px;
}
.card3 {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	    z-index: 10;
}

div#tab1 {
    margin-top: 5vh;
}

.tabs {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tab {
    width: 190px;
    text-align: center;
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 20px;
    margin-bottom: 10px;
    background-color: #f1f1f1;
}
.tab.active {
    background-color: #ccc;
}
.tab-content {
    flex-wrap: wrap;
    display: flex;
    padding-bottom: 7vmin;
    border-radius: 5px;
    align-items: center;
    max-width: 1200px;
    justify-content: space-around;
}
.tab-content.active {
    display: flex;
}

.circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90vmin;
    height: 90vmin;
    position: relative;
}
.circle {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0.25vmin solid #000;
}
.center-image {
    position: absolute;
    top: 48%;
    left: 51%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
}
/* Outer circle points */
.outer-point {
    position: absolute;
    background-color: black;
    border-radius: 50%;
    transition: transform 0.2s;
}
.tab-in {
    position: relative;
    display: flex;
    margin:0 40px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.tab-in .star-point {
    font-weight: 500;
    border: none;
    background-color: transparent;
    font-size: 1.9em;
}
.outer-point.small {
    width: 0.55vmin;
    height: 0.55vmin;
  margin-left: -1px;
    margin-top: -1px;
}
.hidden {
    display: none;
}
.outer-point.large {
    width: 1vmin;
    height: 1vmin;
}
.outer-point:hover {
    transform: scale(1.1); /* Increase size by 10% */
}
.karma {
    width: 36vmin!important;
    margin-top: 14vmin;
}
/* Labels */
.label {
    position: absolute;
    font-size: 1vmin;
    font-weight: bold;
    color: #000;
    transform: translate(-50%, -50%);
    white-space: nowrap; /* Prevent text wrapping */
}
.label.large {
    font-size: 1.5vmin;
    font-weight: bold;
}
/* Numbers inside the circle */
.number {
    position: absolute;
    color: #000;
    transform: translate(-50%, -50%);
    white-space: nowrap; /* Prevent text wrapping */
}
.number.large {
    font-size: 1.5vmin;
    font-weight: bold;
}
.number.small {
    font-size: 14px;
}
/* Star points */
.star-point {
    position: absolute;
    width: 6vmin;
    height: 6vmin;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    color: rgba(132, 0, 22, 1);
    font-weight: bold;
    justify-content: center;
    align-items: center;
    background: #E5E5E5;
    opacity: 0; /* Initially hidden */
    animation: fadeIn 1s forwards; /* Fade in animation */
}
#circle .star-point {
    outline: 0.6vmin solid rgba(229, 229, 229, 0.5);
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

#star-point1 {
    animation-delay: 1.2s;
}
#star-point2 {
    animation-delay: 2.2s;
}
#star-point3 {
    animation-delay: 1.4s;
}
#star-point4 {
    animation-delay: 2.6s;
}
#star-point5 {
    animation-delay: 1.8s;
}
#star-point12 {
    animation-delay: 3s;
}
#star-point13 {
    animation-delay: 3.2s;
}
#star-point14 {
    animation-delay: 3.4s;
}
#star-point15 {
    animation-delay: 3.8s;
}
#star-point16 {
    animation-delay: 3.6s;
}
#star-point6 {
    animation-delay: 4s;
}
#star-point7 {
    animation-delay: 4.2s;
}
#star-point8 {
    animation-delay: 4.4s;
}
#star-point9 {
    animation-delay: 4.6s;
}
#star-point10 {
    animation-delay: 4.8s;
}
#star-point11 {
    animation-delay: 5s;
}
.outer-point.large {
    color: #850117;
    background-color: #850117;
}
.large {
    color: #850117;
}
#tab2 {
    margin-top: 6vmin;
}
#tab3 .star-point21 {
    background: rgb(132, 0, 22);
    width: 3vmin;
    font-size: 1.6vmin;
    height: 3vmin;
    background: linear-gradient(130deg, rgba(132, 0, 22, 1) 0%, rgba(132, 0, 22, 1) 100%);
    outline: 0.5vmin solid rgba(132, 0, 22, 0.5);
    color: white;
}
#circle .star-point5 {
    background: #C611DB;
    outline: 0.9vmin solid rgba(198, 17, 219, 0.5);
    color: white;
    width: 7vmin;
    font-size: 3.1vmin;
    height: 7vmin;
}
#circle .star-point1 {
    background: rgb(132, 0, 22);
    background: linear-gradient(130deg, rgba(132, 0, 22, 1) 0%, rgba(132, 0, 22, 1) 100%);
    outline: 0.9vmin solid rgba(132, 0, 22, 0.5);
    color: white;
}
#circle .star-point7 {
    background: #0B57EA;
    outline: 0.9vmin solid rgba(11, 87, 234, 0.5);
    color: white;
}
#tab3 .star-point7 {
    background: #0B57EA;
    width: 4vmin;
    height: 4vmin;
    font-size: 2vmin;
    outline: 0.6vmin solid rgba(11, 87, 234, 0.5);
    color: white;
}
#tab3 .star-point8 {
    width: 4vmin;
    height: 4vmin;
    background: rgba(11, 170, 234, 1);
    font-size: 2vmin;
    outline: 0.6vmin solid rgba(11, 170, 234, 0.5);
    color: white;
}
#tab3 .star-point9 {
    width: 4vmin;
    height: 4vmin;
    background: rgba(9, 207, 41, 1);
    font-size: 2vmin;
    outline: 0.6vmin solid rgba(9, 207, 41, 0.5);
    color: white;
    z-index: 2;
}
#tab3 .star-point10 {
    width: 4vmin;
    height: 4vmin;
    background: rgba(238, 231, 21, 1);
    font-size: 2vmin;
    outline: 0.6vmin solid rgba(238, 231, 21, 0.5);
    color: white;
    z-index: 2;
}
#tab3 .star-point11 {
    width: 4vmin;
    height: 4vmin;
    background: rgba(241, 123, 36, 1);
    font-size: 2vmin;
    outline: 0.6vmin solid rgba(241, 123, 36, 0.5);
    color: white;
    z-index: 2;
}
#circle .star-point8 {
    background: rgba(11, 170, 234, 1);
    outline: 0.9vmin solid rgba(11, 170, 234, 0.5);
    color: white;
}
#circle .star-point9 {
    background: rgba(9, 207, 41, 1);
    outline: 0.9vmin solid rgba(9, 207, 41, 0.5);
    color: white;
    z-index: 2;
}
#circle .star-point10 {
    background: rgba(238, 231, 21, 1);
    outline: 0.9vmin solid rgba(238, 231, 21, 0.5);
    color: white;
    z-index: 2;
}
#circle .star-point11 {
    background: rgba(241, 123, 36, 1);
    outline: 0.9vmin solid rgba(241, 123, 36, 0.5);
    color: white;
    z-index: 2;
}
#text-container {
    text-align: center;
    margin: 0 auto;
}
#text-container ul {
    text-align: left;
}
@media screen and (max-width: 500px) {
    .star-point32{   left: 34% !important;font-size: 1.2em!important; top: 47.2%!important;}
    .star-point36{left: 36% !important; font-size: 1.2em!important; top: 47.2%!important;}
    .star-point31,.star-point29,.star-point33,.star-point35,.star-point37{    top: 47.2%!important; font-size: 1.2em!important;}
    .star-point28,.star-point34,.star-point30{  left:38%!important;  top: 47.2%!important; font-size: 1.2em!important;}
    .st211,.st19{left: -1.4%!important;}
    .st22,.st26{left: 14.4%!important;}
    .st17{left: 17.4%!important;}
    .st8{left: 3.6%!important;}
    .st10{left: 84%!important;}
    .st20{left: 5.6%!important;}
    .st21{left: 84%!important;}
    .st199{left: 86%!important;}
     
    
    #text-container {

    padding: 0 20px;
}
    .card{width: 80vmin!important;}
	
    
    #tab3 .star-point7 {
        background: #0B57EA;
        width: 9vmin;
        height: 9vmin;
        font-size: 4vmin;
        outline: 0.6vmin solid rgba(11, 87, 234, 0.5);
        top: 47%!important;
        color: white;
        left: 16% !important;
    }
    #tab3 .star-point8 {
        background: rgba(11, 170, 234, 1);
        width: 9vmin;
        height: 9vmin;
        font-size: 4vmin;
        outline: 0.6vmin solid rgba(11, 170, 234, 0.5);
        top: 47%!important;
        color: white;
        left: 29.7% !important;
    }
    #tab3 .star-point9 {
        width: 9vmin;
        height: 9vmin;
        background: rgba(9, 207, 41, 1);
        font-size: 4vmin;
        outline: 0.6vmin solid rgba(9, 207, 41, 0.5);
        top: 47%!important;
        color: white;
        z-index: 2;
       
    }
    #tab3 .star-point10 {
        width: 9vmin;
        height: 9vmin;
        background: rgba(238, 231, 21, 1);
        font-size: 4vmin;
        outline: 0.6vmin solid rgba(238, 231, 21, 0.5);
        top: 47%!important;
        color: white;
        z-index: 2;
    }
    #tab3 .star-point11 {
        width: 9vmin;
        height: 9vmin;
        background: rgba(241, 123, 36, 1);
        font-size: 4vmin;
        outline: 0.6vmin solid rgba(241, 123, 36, 0.5);
        top: 47%!important;
        color: white;
        z-index: 2;
    }
    #tab3 .star-point5 {
               left: 2vmin !important;
        width: 9vmin!important;
        height: 9vmin!important;
        top: 48%!important;
        font-size: 4vmin!important;
    }
    #tab3 .star-point2 {
        left: 89%!important;
        width: 9vmin!important;
        height: 9vmin!important;
        top: 48%!important;
        font-size: 4vmin!important;
    }
    #tab3 .star-point-new1 {
        width: 9vmin !important;
        font-size: 3.9vmin !important;
        top: 60%!important;
        height: 9vmin !important;
    }
    #tab3 .star-point-new2 {
        width: 9vmin !important;
        font-size: 3.9vmin !important;
        top: 60%!important;
        height: 9vmin !important;
    }
    #tab3 .star-point-new3 {
        width: 9vmin !important;
        font-size: 3.9vmin !important;
        top: 60%!important;
        left: 52.8%!important;
        height: 9vmin !important;
    }

    .tabcont {
        min-height: 100%;
    }
    #circle .star-point {
        font-size: 2.5vmin;
    }
    .tab-in .star-point {
        font-size: 1.6em;
    }
    .karma {
        width: 44vmin !important;
        margin-top: 16vmin;
        margin-bottom: 5vmin;
    }
    #tab2 .star-point5,
    .tab-in .star-point1,
    .tab-in .star-point2,
    .tab-in .star-point3,
    .tab-in .star-point4 {
        left: 43.7% !important;
    }
    #tab2 .star-point9,
    .tab-in .star-point14,
    .tab-in .star-point16,
    .tab-in .star-point15,
    .tab-in .star-point4 {
        left: 44.4% !important;
    }
    #tab3 .karma {
        width: 90%!important;
    }
    #tab3 .star-point21 {
        background: rgb(132, 0, 22);
        width: 9vmin!important;
        font-size: 3.9vmin!important;
        height: 9vmin!important;
        background: linear-gradient(130deg, rgba(132, 0, 22, 1) 0%, rgba(132, 0, 22, 1) 100%);
        outline: 1vmin solid rgba(132, 0, 22, 0.5)!important;
        top: 83.5%!important;
        color: white;
    }
	.tab-content{flex-direction: column;}
}
		


.card {
position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    width: 50vmin;
       padding: 38px 26px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 4px 90px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  height: 110px;
  
    display: flex;
    justify-content: center;
    background: #3b3b3b1c;
    align-items: center;
}

.card:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 34%,
    rgba(255, 255, 255, 1) 89%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.3;
  filter: blur(0.5px);
  mix-blend-mode: hard-light;
}

.noise {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  opacity: 0.1;
}

.content {
  position: relative;
  z-index: 2;
  text-shadow: -3px 0px 2px rgba(0, 0, 0, 0.1);
}



@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }
  50% {
    transform: translateX(50%) translateY(10%);
  }
  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}

.gradient-bg {
  width: 100vw;
  height: 100%;
  position: absolute;
  overflow: hidden;
  opacity: 1;
z-index: 10;
  top: 0;
  left: 0;
	background: white;
}

.svgBlur {
  display: none;
}

.noiseBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: soft-light;
  opacity: 0.3;
}

.gradients-container {
  filter: url(#goo) blur(40px);
  width: 100%;
  height: 100%;
}

.g1 {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(var(--color1), 0.8) 0,
      rgba(var(--color1), 0) 50%
    )
    no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: center center;
  animation: moveVertical 30s ease infinite;

  opacity: 1;
}

.g2 {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(var(--color2), 0.8) 0,
      rgba(var(--color2), 0) 50%
    )
    no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: calc(50% - 400px);
  animation: moveInCircle 20s reverse infinite;

  opacity: 1;
}

.g3 {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(var(--color3), 0.8) 0,
      rgba(var(--color3), 0) 50%
    )
    no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2 + 200px);
  left: calc(50% - var(--circle-size) / 2 - 500px);

  transform-origin: calc(50% + 400px);
  animation: moveInCircle 40s linear infinite;

  opacity: 1;
}

.g4 {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(var(--color4), 0.8) 0,
      rgba(var(--color4), 0) 50%
    )
    no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: calc(50% - 200px);
  animation: moveHorizontal 40s ease infinite;

  opacity: 0.7;
}

.g5 {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(var(--color5), 0.8) 0,
      rgba(var(--color5), 0) 50%
    )
    no-repeat;
  mix-blend-mode: var(--blending);

  width: calc(var(--circle-size) * 2);
  height: calc(var(--circle-size) * 2);
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));

  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: moveInCircle 20s ease infinite;

  opacity: 1;
}

.g6 {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(var(--color6), 0.8) 0,
      rgba(var(--color6), 0) 50%
    )
    no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: calc(50% - 100px);
  animation: moveHorizontal 50s ease infinite;

  opacity: 0.5;
}

.interactive {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(var(--color-interactive), 0.8) 0,
      rgba(var(--color-interactive), 0) 50%
    )
    no-repeat;
  mix-blend-mode: var(--blending);

  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;

  opacity: 0.7;
}

.star-container {
    position: relative;
    width: 80%; /* Genel genişliği ayarla */
    max-width: 1000px; /* Büyük ekranlarda çok geniş olmasını engelle */
    margin: 0 auto; /* Ortala */
    transform: scale(0.8); /* Küçültme */
    transform-origin: top center;
}