@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}
:root {
  --color-bg1: rgb(8, 10, 15);
  --color-bg2: rgb(0, 17, 32);
  --color1: 18, 113, 255;
  --color2: 107, 74, 255;
  --color3: 100, 100, 255;
  --color4: 50, 160, 220;
  --color5: 80, 47, 122;
  --color-interactive: 140, 100, 255;
  --circle-size: 80%;
  --blending: hard-light;
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#main header {
  font-family: Arial, sans-serif;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vh;
}

#main .links {
  width: 600px;
  justify-content: space-between;
  align-items: center;
  padding: 5rem 2rem;
  display: flex;
}

#main .links a {
  text-decoration: none;
  font-size: 24px;
  color: #333;
  transition: 0.3s ease;
}

#main .cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(255,255,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.1s ease;
  transform: translate(-50%, -50%);
}

#main .links a:hover {
  color: #fff;
  font-size: 2rem;/* Change color on hover */
}

#main .links a:hover ~ .cursor{
  color: red;
}


::selection {
	background-color: #000;
  color: #fff;
}
::-moz-selection {
	background-color: #000;
  color: #fff;
}




html,body{
  height: 100%;
  width: 100%;
}

#page1{
  height: 100vh;
  position: relative;
  background-color: black;
}
#page2{
  min-height: 100vh;
  background-color: black;
}
#page3{
  height: 100vh;
}

#page1 .frame{
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  height: 100%;  
}
#page1 .frame .logo{
  max-width: 100%; /* Optional: to make sure the image is responsive */
  height: auto; 
}

.footer{
  width: 100%;
  height: 20vh;
  display: grid;
  place-items: center;
  text-align: center;
  h1{
    font-size: 8em;
    line-height: 110%;
  }
}


#page2 .grid-container {
  display: flex;
  flex-wrap: wrap; /* Taşan öğeleri alt satıra alır */
  justify-content: center;
  align-content: center;
  gap: 20px;       /* Öğeler arasındaki boşluk */
  padding:20px 20px; /* Sayfanın sağ ve sol taraflarında 20px boşluk bırak */
}

/*baslangic*/
#page2 .card {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card:hover:before, #page2 .card:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #ff5d5d, #e33c3c 43%, #c20000);
}

#page2 .card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #ff5d5d, #e33c3c 43%, #c20000);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card2 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card2:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card2:hover:before, #page2 .card2:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #ffc65d, #e3a03c 43%, #c28e00);
}

#page2 .card2::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #ffc65d, #e3a03c 43%, #c28e00);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card2::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card3 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card3:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card3:hover:before, #page2 .card3:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #6bff5d, #41e33c 43%, #00c20a);
}

#page2 .card3::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #6bff5d, #41e33c 43%, #00c20a);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card3::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card4 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card4:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card4:hover:before, #page2 .card4:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotatrgb(38, 143, 38)
    , #449c38, #268d26 43%, #078a02));
}

#page2 .card4::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotatrgb(38, 143, 38)
    , #449c38, #268d26 43%, #078a02));
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card4::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card5 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card5:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card5:hover:before, #page2 .card5:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #5dffe9, #3ce3db 43%, #00c298);
}

#page2 .card5::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5dffe9, #3ce3db 43%, #00c298);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card5::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card6 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card6:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card6:hover:before, #page2 .card6:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #5decff, #3cc2e3 43%, #00a5c2);
}

#page2 .card6::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5decff, #3cc2e3 43%, #00a5c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card6::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card7 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card7:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card7:hover:before, #page2 .card7:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #5d96ff, #3c67e3 43%, #0024c2);
}

#page2 .card7::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5d96ff, #3c67e3 43%, #0024c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card7::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card8 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card8:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card8:hover:before, #page2 .card8:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #5d83ff, #3c63e3 43%, #0d00c2);
}

#page2 .card8::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5d83ff, #3c63e3 43%, #0d00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card8::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card9 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card9:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card9:hover:before, #page2 .card9:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #a95dff, #983ce3 43%, #4e00c2);
}

#page2 .card9::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #a95dff, #983ce3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card9::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}
/**/
#page2 .card10 {
  background: rgb(34, 34, 34);
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

#page2 .card10:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
#page2 .card10:hover:before, #page2 .card10:hover:after {
  animation: spin 2.5s linear infinite;
  opacity: 1;
  transition: opacity .5s;
  background-image: linear-gradient(
    var(--rotate)
    , #262a2b, #bcc1cf 43%, #aaa1b8);
}

#page2 .card10::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #262a2b, #bcc1cf 43%, #aaa1b8);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: none;
  opacity: 0;
}

#page2 .card10::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
    opacity: 1;
  animation: none;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}




@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: 100vh;
  overflow: hidden;
  position: fixed;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  top: 0;
  left: 0;

  .svgBlur {
    display: none;
  }

  .noiseBg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    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;
  }

  .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;
  }
}