/* rotasi teks vertikal */
.rotating-text-v {
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-style: preserve-3d;
  display: inline-block;
  perspective: 500px;
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* rotasi teks horisontal */
.rotating-text {
  animation-name: spinx;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-style: preserve-3d;
  display: inline-block;
  perspective: 500px;
}

@keyframes spinx {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}
/* mengetik teks */
.typing-text {
  /* Teks awal tidak terlihat */
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: monospace;
  font-size: 24px;
  border-right: .15em solid orange; /* Kursor awal */
  /* Animasi mengetik */
  animation: 
    typing 4s steps(40, end) forwards,
    blink-caret .75s step-end infinite;
}

/* Animasi untuk efek mengetik */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Animasi untuk kursor yang berkedip */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}