*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
html,body{
    height: 100%;
    width: 100%;
    background-color: #391754;
}

#loop>h1{
    animation-name: anim;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#loop>h1>span{
    -webkit-text-stroke: 1.2px #ffffff;
}

@keyframes anim{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.scroll {
    animation: bounce 2s infinite;
}

#page1 #left-text>h1, #page2 #right-text>h1, #page5 #left-text>h1{
    -webkit-text-stroke: 2px #451d65;
}

ortfolio-boxes div{
    background-image: url("./portfolyo/gorsel.jpg");
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}


a:hover,
a:focus {
  color: #391754;
}

a.check-more {
  perspective: 1000px;
  
  span {
    position: relative;
    display: inline-block;
    padding: 0;    
    transition: transform 0.3s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
  }
  
  span:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(data-hover);
    transition: color 0.3s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
    text-align: center;
  }
  
  &:hover span,
  &:focus span {
    transform: rotateX(90deg) translateY(-22px);
  }
  
  &:hover span:before,
  &:focus span:before {
    color: #ea9300;
  }
}


#footer a {
    color: #ffffff;
    position: relative;
    text-decoration: none;
  }
  
  #footer a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 30px;
    background-color: #ea9300;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }
  
  #footer a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
  }

  

.text-animation {
    position: relative;
}
.text-animation::before {
    content: attr(data-text);
    position: absolute;
    top:0;
    left:0;
    width: 0;
    height: 100%;
    color:#ea9300;
    -webkit-text-stroke: 0vw #ea9300;
    border-right: 2px solid #ea9300;

    overflow: hidden;
    animation: animate 6s cubic-bezier(0.23, 1, 0.320, 1) infinite;
}

@keyframes animate {


    0% ,10%,100%{
        width: 0%;
        left:4%;
        background-color:transparent;
    }
    50%,60%{
        width: 100%;
        background-color:#ffffff79;
    }
}

/* tailwind.css ya da global.css içinde */

.marquee-logos {
  --duration: 60s;
  --scroll-start: 0%;
  --scroll-end: calc(-100% - 1rem); /* gap yerine sabit değer kullanabilirsiniz */
}

/* MASKE EFECTİ */
.mask-maskX {
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image:        linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/* ANİMASYONLAR */
@keyframes scroll-x {
  from { transform: translateX(var(--scroll-start)); }
  to   { transform: translateX(var(--scroll-end));   }
}

@keyframes scroll-x-reverse {
  from { transform: translateX(var(--scroll-end));   }
  to   { transform: translateX(var(--scroll-start)); }
}

/* TAILWIND ARBITRARY UTILITIES YAZILMADIĞINDA KULLANIN */
.animate-scrollX {
  animation: scroll-x var(--duration) linear infinite;
}

.animate-scrollX-reverse {
  animation: scroll-x-reverse var(--duration) linear infinite;
}