/* #region Global Hero*/
header {
    position: relative;
    overflow: hidden;
    height: 80px;
    width: 100%;
    z-index: 9999;
    top: 0;
    background-color: transparent;
}
body{
    background:
        radial-gradient(2000px circle at 35% 25vh,
            rgba(88, 166, 255, 0.1),
            transparent 40%),
        radial-gradient(900px circle at 50% 50vh,
            rgba(163, 113, 247, 0.1),
            transparent 45%),
        radial-gradient(1200px circle at 75% 80vh,
            rgba(113, 247, 231, 0.1),
            transparent 45%),
        linear-gradient(135deg,
            var(--smoke-bg),
            var(--smoke-p));
}
.hero {
    height: var(--hero-height);
}

.hero .container {
    height: 100%;
}

.hero h1 {
    font-weight: 800;
    font-size: 94px;
    letter-spacing: -6px;
    text-align: center;

}

.hero p {
    font-size: 20px;
    font-weight: 900;
    margin-top: -25px;
}

.hero p span {
    background: linear-gradient(90deg, var(--smoke-s), var(--smoke-t));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero .register {
    background-color: white;
    color: black;
    border-radius: var(--border-p);
    padding: 5px;
}

.hero .register #email_input {
    border-radius: var(--border-p);
    padding: var(--padding-p);
}

.hero .register #email_input:focus {
    outline: none;
}

.hero .register #register_button {
    background-color: var(--smoke-t);
    color: white;
    border-radius: var(--border-p);
    padding: var(--padding-p);
    font-weight: 600;
    transition: var(--gecis);
}

.hero .register #register_button:hover {
    filter: brightness(0.9);
}
.hero .register #register_button:active {
    transform: scale(0.96);
}

.hero .register #register_button .text{
    display: block;
}
.hero .register #register_button .icon{
    display: none;
}

.hero .explore #explore_button {
    border: 1px solid white;
    color: white;
    border-radius: var(--border-p);
    padding: var(--padding-s);
    position: relative;
    overflow: hidden;
    transition: var(--gecis);
}

.hero .explore #explore_button span {
  position: relative;
  z-index: 2; /* yazı üstte */
}

.hero .explore #explore_button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--smoke-p);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  z-index: 1;
}

.hero .explore #explore_button:hover::before {
  transform: translateX(0);
}

.hero .explore #explore_button:hover {
  color: white;
}
.hero .explore #explore_button:active {
  transform: scale(0.96);
}


/* #region Responsive*/
@media (max-width: 640px) {
    body {
    background:
        radial-gradient(700px circle at 25% 35vh,
            rgba(88, 166, 255, 0.15),
            transparent 40%),
        radial-gradient(500px circle at 50% 50vh,
            rgba(163, 113, 247, 0.15),
            transparent 45%),
        radial-gradient(600px circle at 85% 60vh,
            rgba(113, 247, 231, 0.15),
            transparent 45%),
        linear-gradient(135deg,
            var(--smoke-bg),
            var(--smoke-p));
}
    .hero h1 {
        font-weight: 800;
        font-size: 94px;
        letter-spacing: -6px;
        text-align: center;

    }

    .hero p {
        font-size: 20px;
        font-weight: 900;
        margin-top: -25px;
        text-align: center;
    }

    .hero .buttons{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .hero .explore #explore_button {
        border: 1px solid white;
        color: white;
        border-radius: var(--border-p);
        padding: 13px;
    }
    .hero .register #register_button .text{
        display: none;
    }
    .hero .register #register_button .icon{
        display: block;
    }
}

    

/* #endregion */

/* #endregion */

/* #region Features*/
.features {
    height: 100vh;
    display: none;
}
.features .card{
    height: 70vh;
    width: 80%;
    border-radius: var(--border-t);
    background-color: var(--smoke-s);
    backdrop-filter: blur(8px);
}
/* #endregion */