@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-up {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

.animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

.animate-slide-up {
    animation: slide-up 0.8s ease-out forwards;
}

/* selalu goyang */
.shake-btn {
    animation: shake 0.4s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #6b46c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #805ad5;
}

/* Tab transitions */
.tab-content {
    transition: opacity 0.3s ease;
}

.gaming-frame {
    border: 2px solid #805ad5;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(128, 90, 213, 0.5);
}

.hidden {
    display: none;
}

/* Game UI elements */
.border-purple-500 {
    border-color: #805ad5;
}

.bg-purple-600 {
    background-color: #805ad5;
}

/* Profile picture animation */
.profile-pic {
    position: relative;
    border: 4px solid transparent;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400% 400%;
    animation: rainbow 4s linear infinite;
    padding: 2px;
}

.profile-pic img {
    border-radius: 50%;
    display: block;
}

@keyframes rainbow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* Verification icon animation */
.verification-badge {
    animation: none;
}

@keyframes flip {
    0%, 100% {
        transform: perspective(200px) rotateY(0deg);
    }
    50% {
        transform: perspective(200px) rotateY(180deg);
    }
}

.hover\:bg-purple-700:hover {
    background-color: #6b46c1;
}

/* ============================
   GLOBAL RIPPLE EFFECT
   ============================ */
button,
.ripple-container {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
    background: rgb(120, 79, 233);
    animation: ripple-effect 2s ease-out;
}

@keyframes ripple-effect {
    to {
        transform: scale(7);
        opacity: 0;
    }
}

/* ============================
   ROCKET LOADING SCREEN
   ============================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

#loading-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #020617 0%, #020617 50%, #000000 100%);
  z-index: 999999;
  display: none;
  opacity: 0;
}

/* INTRO OVERLAY */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
}

.intro-card {
  background: #111827;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  text-align: center;
}

.intro-card p {
  margin-bottom: 1rem;
}

#loading-screen .loader-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#loading-screen .structure,
#loading-screen .smoke {
  position: absolute;
  z-index: 1000;
  top: calc(50% - 65px);
  left: calc(50% - 100px);
  width: 200px;
  height: 130px;
}

#loading-screen .smoke {
  z-index: 999;
  transform-origin: center center;
  transform: rotate(-90deg);
}

#loading-screen .structure {
  transform: translate3d(0, 0, 0);
  perspective: 1000px;
  animation: rocket-shake 0.42s cubic-bezier(.36,.07,.19,.97) both infinite;
}

#loading-screen .text-container {
  position: absolute;
  top: calc(50% + 100px);
  left: calc(50% - 100px);
  width: 200px;
}

#loading-screen .text-container h2 {
  width: 100%;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #ffffff;
}

#rocket-svg {
  position: absolute;
  top: -112px;
  left: 50%;
  transform: translateX(-50%);
}

#right-wing,
#left-wing,
#nose,
#window-stroke,
#middle-wing {
  fill: #38bdf8;
}

#rocket-main-part {
  fill: #1e3a8a;
}

#window-inner {
  fill: #0f172a;
}

#loading-screen .smoke span {
  position: absolute;
  width: 50px;
  border-bottom: 2px solid #e5e7eb;
  box-shadow: 0 0 6px rgba(248, 250, 252, 0.9);
  opacity: 0.9;
}

#loading-screen .smoke span:nth-child(1) { top: 28px; left: -50px; animation: smoke1 0.6s ease-out infinite; }
#loading-screen .smoke span:nth-child(2) { top: 36px; left: -50px; animation: smoke2 0.7s ease-out infinite; }
#loading-screen .smoke span:nth-child(3) { top: 44px; left: -50px; animation: smoke3 0.75s ease-out infinite; }
#loading-screen .smoke span:nth-child(4) { top: 52px; left: -50px; animation: smoke4 0.8s ease-out infinite; }
#loading-screen .smoke span:nth-child(5) { top: 60px; left: -50px; animation: smoke5 0.85s ease-out infinite; }
#loading-screen .smoke span:nth-child(6) { top: 68px; left: -50px; animation: smoke6 0.9s ease-out infinite; }
#loading-screen .smoke span:nth-child(7) { top: 76px; left: -50px; animation: smoke7 0.95s ease-out infinite; }
#loading-screen .smoke span:nth-child(8) { top: 84px; left: -50px; animation: smoke8 1s ease-out infinite; }
#loading-screen .smoke span:nth-child(9) { top: 92px; left: -50px; animation: smoke9 1.05s ease-out infinite; }
#loading-screen .smoke span:nth-child(10){ top:100px; left: -50px; animation: smoke10 1.1s ease-out infinite; }

@keyframes smoke1   { from { left:-50px; opacity:1; } to { left:-150px; opacity:0; } }
@keyframes smoke2   { from { left:-50px; opacity:1; } to { left:-180px; opacity:0; } }
@keyframes smoke3   { from { left:-50px; opacity:1; } to { left:-210px; opacity:0; } }
@keyframes smoke4   { from { left:-50px; opacity:1; } to { left:-240px; opacity:0; } }
@keyframes smoke5   { from { left:-50px; opacity:1; } to { left:-270px; opacity:0; } }
@keyframes smoke6   { from { left:-50px; opacity:1; } to { left:-300px; opacity:0; } }
@keyframes smoke7   { from { left:-50px; opacity:1; } to { left:-330px; opacity:0; } }
@keyframes smoke8   { from { left:-50px; opacity:1; } to { left:-360px; opacity:0; } }
@keyframes smoke9   { from { left:-50px; opacity:1; } to { left:-390px; opacity:0; } }
@keyframes smoke10  { from { left:-50px; opacity:1; } to { left:-420px; opacity:0; } }

#loading-screen .meteors-container {
  position: absolute;
  z-index: 998;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: center center;
  transform: rotate(-90deg);
}

#loading-screen .meteors-container span {
  position: absolute;
  width: 75px;
  border-bottom: 2px solid #e5e7eb;
  box-shadow: 0 0 5px #ffffff;
}

#loading-screen .meteors-container span:nth-child(1) { top: 16%;  animation: meteor1 0.8s linear infinite; }
#loading-screen .meteors-container span:nth-child(2) { top: 32%;  animation: meteor2 0.9s linear infinite; }
#loading-screen .meteors-container span:nth-child(3) { top: 48%;  animation: meteor3 1s linear infinite; }
#loading-screen .meteors-container span:nth-child(4) { top: 64%;  animation: meteor4 0.85s linear infinite; }
#loading-screen .meteors-container span:nth-child(5) { top: 80%;  animation: meteor5 0.95s linear infinite; }
#loading-screen .meteors-container span:nth-child(6) { top: 92%;  animation: meteor6 1.05s linear infinite; }

@keyframes meteor1 { 0%{ left:100%; } 75%{ left:-75px; } 100%{ left:-75px; } }
@keyframes meteor2 { 0%{ left:100%; } 75%{ left:-75px; } 100%{ left:-75px; } }
@keyframes meteor3 { 0%{ left:100%; } 75%{ left:-75px; } 100%{ left:-75px; } }
@keyframes meteor4 { 0%{ left:100%; } 75%{ left:-75px; } 100%{ left:-75px; } }
@keyframes meteor5 { 0%{ left:100%; } 75%{ left:-75px; } 100%{ left:-75px; } }
@keyframes meteor6 { 0%{ left:100%; } 75%{ left:-75px; } 100%{ left:-75px; } }

@keyframes rocket-shake {
  10%, 90%  { transform: translate3d(-1px, 1px, 0); }
  20%, 80%  { transform: translate3d( 2px, 2px, 0); }
  30%, 50%, 70% { transform: translate3d(-2px, -2px, 0); }
  40%, 60%  { transform: translate3d( 2px, 2px, 0); }
}

#loading-screen .structure.launch {
  animation: launch-up 1s ease-in forwards;
}

@keyframes launch-up {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -300px, 0);
    opacity: 0;
  }
}

#loading-screen .smoke.fade-out,
#loading-screen .meteors-container.fade-out,
#loading-screen .text-container.fade-out {
  animation: loader-fade 1s ease forwards;
}

@keyframes loader-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

#loading-screen .rocket-jet {
  position: absolute;
  left: 50%;
  top: calc(90% + 900px);
  transform: translateX(-50%) scaleY(0.3);
  transform-origin: 50% 0%;
  width: 140px;
  height: 220px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background:
    radial-gradient(circle at 50% 0%,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(251, 191, 36, 0.9) 15%,
      rgba(248, 250, 252, 0.9) 30%,
      rgba(148, 163, 184, 0.7) 70%,
      rgba(30, 64, 175, 0.0) 100%);
  filter: blur(4px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

#loading-screen .rocket-jet.on {
  animation: rocket-jet-burst 1.1s ease-out forwards;
}

@keyframes rocket-jet-burst {
  0% {
    transform: translateX(-50%) scaleY(0.3);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scaleY(1.1);
    opacity: 0.15;
  }
}

#loading-screen .launch-flare {
  position: absolute;
  width: 280px;
  height: 320px;
  left: 50%;
  top: 60%;
  transform: translate(-50%, 0) scale(1);
  transform-origin: 50% 0%;
  clip-path: polygon(50% 0, 5% 100%, 95% 100%);
  background:
    radial-gradient(circle at 50% 40%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(254, 249, 195, 0.85) 18%,
      rgba(253, 186, 116, 0.70) 32%,
      rgba(248, 250, 252, 0.40) 52%,
      rgba(148, 163, 184, 0.20) 70%,
      rgba(15, 23, 42, 0.0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 998;
  mix-blend-mode: screen;
  filter: blur(12px);
}

#loading-screen .screen-smoke {
  position: absolute;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background:
    radial-gradient(80% 200% at 50% 115%,
      rgba(148, 163, 184, 0.55) 0%,
      rgba(71, 85, 105, 0.50) 25%,
      rgba(30, 64, 175, 0.40) 45%,
      rgba(15, 23, 42, 0.85) 70%,
      rgba(2, 6, 23, 1.0) 100%);
  filter: blur(90px);
  -webkit-mask-image: radial-gradient(
      ellipse 120% 220% at 50% 115%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 35%,
      rgba(0, 0, 0, 0.7) 55%,
      rgba(0, 0, 0, 0.0) 100%
    );
  mask-image: radial-gradient(
      ellipse 120% 220% at 50% 115%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 35%,
      rgba(0, 0, 0, 0.7) 55%,
      rgba(0, 0, 0, 0.0) 100%
    );
  opacity: 0;
  transform: translateY(100%);
}

#loading-screen .screen-smoke.rise {
  animation: screen-smoke-rise 1.8s ease-out forwards;
}

@keyframes screen-smoke-rise {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  45% {
    transform: translateY(15%);
    opacity: 0.9;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* FORM KRITIK */
#kritik-content {
    color: #ffffff !important;
}

#kritik-content * {
    text-shadow: none !important;
}

#kritik-content label {
    color: #ffffff !important;
    font-weight: 600;
}

#kritik-content input,
#kritik-content textarea {
    background-color: #111827 !important;
    color: #ffffff !important;
    border: 1px solid #4b5563 !important;
    border-radius: 0.5rem !important;
    padding: 0.65rem 0.75rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#kritik-content input:focus,
#kritik-content textarea:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.4) !important;
}

#kritik-content input::placeholder,
#kritik-content textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

#kritik-content button {
    background-color: #9333ea !important;
    font-weight: 600;
    color: white !important;
    border-radius: 9999px !important;
}

#kritik-content button:hover {
    background-color: #7e22ce !important;
    transform: scale(1.02);
}

#kritik-status {
    color: #ffffff !important;
}

/* POPUP SUCCESS ANIMATION */
#popup-success.show {
    opacity: 1;
    pointer-events: auto;
}

#popup-success.show #popup-box {
    transform: scale(1);
}

/* POPUP MARKET FAKE BUYER */
#market-popup.show {
    opacity: 1;
    pointer-events: auto;
}

.product-wrapper {
    position: relative;
    display: inline-block;
}

product-card {
    position: relative;
    display: block;
}

product-card[data-best-seller="true"]::after {
    content: "Best Seller";
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    background: linear-gradient(0deg, #ef4444 0%, #f97373 100%);
    color: #ffffff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

product-card.visible[data-best-seller="true"]::after {
    opacity: 1;
    transform: translateY(0);
}