body {
  margin: 0;
  overflow: hidden;
  font-family: Poppins, Arial;
  background: radial-gradient(circle at top, #09001d, #000);
  color: #e0e0ff;
}

/* Container */
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  backdrop-filter: blur(30px);
  background: rgba(40, 40, 80, 0.2);
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(120, 120, 255, 0.5);
  box-shadow: 0 0 25px #5df;
}

/* Title hologram */
.title {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  background: linear-gradient(90deg, #4df, #aaf, #4df);
  background-size: 200%;
  -webkit-background-clip: text;
  color: transparent;
  animation: holoMove 3s infinite linear;
}

@keyframes holoMove {
  0%{background-position:0%}
  100%{background-position:200%}
}

/* Chat bubble */
.chat-box p {
  padding: 10px;
  border-radius: 10px;
  margin: 10px 0;
  background: rgba(255,255,255,0.1);
  border-left: 3px solid #6bf;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {opacity:0; transform:translateY(10px)}
  to {opacity:1; transform:translateY(0)}
}

.chat-ai {
  border-left: 3px solid #c6f;
  background: rgba(150,100,255,0.2);
}

/* Input */
.input-area {
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #88f;
  background: rgba(255,255,255,0.1);
  color: #fff;
  outline: none;
}

button {
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(45deg, #55f, #99f, #55f);
  background-size: 200%;
  animation: buttonGlow 3s infinite linear;
  color: black;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 10px #55f;
}

@keyframes buttonGlow {
  0%{background-position:0%}
  100%{background-position:200%}
}

/* Bintang */
.stars {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('https://i.ibb.co/7VkJ4Q3/stars.png');
  animation: moveStars 15s linear infinite;
  z-index: -2;
}

@keyframes moveStars {
  from {transform: translateY(0);}
  to {transform: translateY(-250px);}
}

/* Nebula */
.nebula {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('https://i.ibb.co/nnzF3ws/nebula.png');
  opacity: 0.4;
  animation: nebulaMove 25s linear infinite;
  z-index: -1;
}

@keyframes nebulaMove {
  0% {transform: scale(1) rotate(0deg);}
  100% {transform: scale(1.4) rotate(360deg);}
}

/* Planet kecil */
.planet {
  position: fixed;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #7cf, #248);
  border-radius: 50%;
  box-shadow: 0 0 15px #7cf;
  animation: orbit 12s linear infinite;
}

@keyframes orbit {
  0% {transform: translate(0,0);}
  50% {transform: translate(40px,20px);}
  100% {transform: translate(0,0);}
}