body {
    font-family: 'Fira Code', monospace;
    overflow-x: hidden;
    width: 100%;
  }
  }
  
  .landing {
    transition: transform 1s ease, opacity .6s ease;
  }
  
  .landing.hide {
    transform: translateY(-100vh);
    opacity: 0;
    pointer-events: none;
  }

  .no-scroll {
    overflow: hidden;
    height: 100vh;
  }

  .landing {
    position: fixed;
    inset: 0;
    z-index: 50;
    transition: transform 1s ease, opacity .6s ease;
  }
  
  .landing.hide {
    transform: translateY(-100vh);
    opacity: 0;
    pointer-events: none;
  }
  
  .hidden {
    display: none;
  }
  
  .fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px);
    }
  }
  
  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  @keyframes float-rotate {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-6px) rotate(4deg);
    }
  }
  
  .animate-float-rotate {
    animation: float-rotate 4s ease-in-out infinite;
  }

  @keyframes soft-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.08);
    }
  }
  
  .animate-soft-pulse {
    animation: soft-pulse 4s ease-in-out infinite;
  }
  
  @media (max-width: 768px) {
    #gitGraph {
      min-width: 600px;   /* mobile scrollable */
    }
  }

  /* Styling area scroll grafik */
.journey-wrapper {
  /* Menghilangkan scrollbar di Chrome/Safari agar lebih estetik (opsional) */
  scrollbar-width: thin;
  scrollbar-color: #00ffcc transparent;
}

.journey-wrapper::-webkit-scrollbar {
  height: 6px;
}

.journey-wrapper::-webkit-scrollbar-thumb {
  background: #00ffcc;
  border-radius: 10px;
}

/* Memastikan SVG tidak ditarik paksa oleh responsive */
#gitGraph svg {
  max-width: none !important; /* Mencegah SVG mengkerut */
  height: auto !important;
}