@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg:#050816;
  --primary:#7c3cff;
  --secondary:#00e5ff;
  --accent:#ff4ecd;
  --text:#fff;
  --muted:#c9d3ff;
  --border:rgba(255,255,255,.16);
  --glass:rgba(7,11,31,.72);
  --glass-strong:rgba(7,11,31,.88);
  --shadow:0 20px 60px rgba(0,0,0,.38);
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  min-height:100vh;
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

a {
  color:inherit;
  text-decoration:none;
}

/* Background Space */
.space-bg {
  position:fixed;
  inset:0;
  z-index:-10;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(124,60,255,.32), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(0,229,255,.18), transparent 36%),
    radial-gradient(circle at 50% 120%, rgba(255,78,205,.14), transparent 40%),
    #050816;
}

.nebula {
  position:absolute;
  width:520px;
  height:520px;
  border-radius:999px;
  filter:blur(95px);
  opacity:.38;
}

.nebula-1 {
  top:-150px;
  left:-150px;
  background:var(--primary);
  animation:nebulaFloat 12s ease-in-out infinite alternate;
}

.nebula-2 {
  right:-170px;
  bottom:-150px;
  background:var(--secondary);
  animation:nebulaFloat 15s ease-in-out infinite alternate-reverse;
}

.starfield {
  position:absolute;
  inset:0;
}

.star {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 8px rgba(255,255,255,.85),0 0 16px rgba(0,229,255,.35);
  opacity:var(--opacity);
  animation:
    starTwinkle var(--twinkle-duration) ease-in-out infinite alternate,
    starDrift var(--drift-duration) linear infinite;
  animation-delay:var(--delay);
}

.star.big {
  background:rgba(168,247,255,.95);
  box-shadow:0 0 12px rgba(0,229,255,.9),0 0 28px rgba(124,60,255,.45);
}

/* Header */
.top-header {
  position:fixed;
  top:18px;
  left:50%;
  width:min(1120px, calc(100% - 32px));
  transform:translateX(-50%);
  z-index:100;
  display:flex;
  align-items:center;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:26px;
  background:var(--glass);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}

.logo {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
}

.logo-image {
  width:52px;
  height:52px;
  object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(0,229,255,.18));
  animation:logoFloat 3.2s ease-in-out infinite;
}

/* Area halaman */
.page {
  min-height:100vh;
  padding:110px 16px 115px;
}

/* Home section */
.page-home {
  display:flex;
  align-items:center;
  justify-content:center;
}

.home-brand {
  width:min(820px, 100%);
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:34px 20px;
  text-align:center;
}

.home-brand__text {
  font-size:clamp(2.8rem, 10vw, 5.7rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-2px;
  background:linear-gradient(90deg, #ffffff, var(--secondary), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 24px rgba(0,229,255,.22));
}

.home-brand__logo-image {
  width:min(640px, 92%);
  max-width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 0 28px rgba(0,229,255,.14)) drop-shadow(0 0 48px rgba(124,60,255,.18));
  animation:homeLogoFloat 4.2s ease-in-out infinite;
}


.home-brand__typing {
  width:min(760px, 94%);
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#eef7ff;
  font-size:clamp(.82rem, 2.5vw, 1.02rem);
  font-weight:700;
  line-height:1.65;
  letter-spacing:.45px;
  text-align:center;
  text-shadow:0 0 14px rgba(0,229,255,.22), 0 2px 10px rgba(0,0,0,.42);
}

.home-brand__typing::after {
  content:"";
  width:2px;
  height:1.25em;
  margin-left:4px;
  border-radius:999px;
  background:var(--secondary);
  box-shadow:0 0 10px rgba(0,229,255,.75);
  animation:typingCursor .8s steps(2, start) infinite;
}

.home-brand__typing.done::after {
  opacity:.4;
}

/* Bottom Navigation */
.bottom-nav {
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:120;
  width:min(980px, calc(100% - 24px));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:28px;
  background:var(--glass-strong);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}

.bottom-nav__item {
  position:relative;
  min-height:64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:10px 8px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  color:var(--muted);
  background:rgba(255,255,255,.05);
  transition:.28s ease;
  overflow:hidden;
}

.bottom-nav__item::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at top center, rgba(0,229,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(124,60,255,.18), rgba(0,229,255,.08));
  opacity:0;
  transition:.28s ease;
}

.bottom-nav__item > * {
  position:relative;
  z-index:1;
}

.bottom-nav__icon {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 18px rgba(255,255,255,.03);
}

.bottom-nav__icon svg {
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bottom-nav__label {
  font-size:.88rem;
  font-weight:700;
  line-height:1;
}

.bottom-nav__item:hover,
.bottom-nav__item.active {
  transform:translateY(-3px);
  color:white;
  border-color:rgba(0,229,255,.45);
  box-shadow:0 0 22px rgba(0,229,255,.18),inset 0 0 18px rgba(255,255,255,.03);
}

.bottom-nav__item:hover::before,
.bottom-nav__item.active::before {
  opacity:1;
}

.bottom-nav__item.active .bottom-nav__icon,
.bottom-nav__item:hover .bottom-nav__icon {
  background:linear-gradient(135deg, rgba(124,60,255,.72), rgba(0,229,255,.38));
  box-shadow:0 0 18px rgba(0,229,255,.22),inset 0 0 18px rgba(255,255,255,.06);
}

@keyframes typingCursor {
  0%,45% { opacity:1; }
  46%,100% { opacity:0; }
}

@keyframes starTwinkle {
  0% { opacity:.18; transform:scale(.75); }
  50% { opacity:1; transform:scale(1.18); }
  100% { opacity:.38; transform:scale(.9); }
}

@keyframes starDrift {
  0% { translate:0 0; }
  100% { translate:var(--move-x) var(--move-y); }
}

@keyframes nebulaFloat {
  0% { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(80px,55px,0) scale(1.13); }
}

@keyframes logoFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}

@keyframes homeLogoFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-16px); }
}

@media (max-width:700px) {
  .top-header {
    top:12px;
    width:calc(100% - 24px);
    padding:12px;
    border-radius:22px;
  }

  .logo {
    font-size:1.02rem;
  }

  .logo-image {
    width:46px;
    height:46px;
  }

  .page {
    padding:100px 12px 105px;
  }

  .home-brand {
    min-height:calc(100vh - 205px);
    gap:22px;
    padding-top:10px;
  }

  .home-brand__text {
    letter-spacing:-1.4px;
  }

  .home-brand__logo-image {
    width:min(96%, 520px);
  }


  .home-brand__typing {
    width:100%;
    min-height:126px;
    padding:0 10px;
    font-size:.78rem;
    line-height:1.55;
    letter-spacing:.25px;
  }

  .bottom-nav {
    bottom:12px;
    width:calc(100% - 16px);
    gap:8px;
    padding:10px 8px;
    border-radius:22px;
  }

  .bottom-nav__item {
    min-height:58px;
    gap:6px;
    padding:8px 4px;
    border-radius:18px;
  }

  .bottom-nav__icon {
    width:34px;
    height:34px;
    border-radius:12px;
  }

  .bottom-nav__icon svg {
    width:18px;
    height:18px;
  }

  .bottom-nav__label {
    font-size:.74rem;
  }
}

@media (max-width:420px) {

  .home-brand__typing {
    min-height:142px;
    font-size:.72rem;
  }

  .bottom-nav__label {
    font-size:.68rem;
  }

  .bottom-nav__icon {
    width:32px;
    height:32px;
  }

  .home-brand__logo-image {
    width:100%;
  }
}