/* ==========================
   ROOT & GLOBAL STYLE
========================== */
:root {
  --primary: #8d65fa; /* Ungu Biru */
  --secondary: #f0aafa; /* Pink Glow */
  --background: #000000; /* Hitam */
  --bg-dark: #0a0a0a;
  --blue-violet: #8a2be2;
  --violet: #ee82ee;
  --glow-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
  --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --cut: 1px; /* Sesuai variabel inset kamu */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

h1 {
  font-family: "Sekuya", sans-serif;
}
@font-face {
  font-family: "Sekuya";
  src: url("../fonts/Sekuya.ttf") format("truetype");
  font-display: swap;
}
/* ==========================
   GLOBAL BACKGROUND
   Smooth Violet / Blue Glow - Modern & Futuristic Edition
========================== */
html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
  font-family: "Archivo Black", sans-serif;
  color: white;
  background:
    /* Glow sudut kiri atas diperkuat */
    radial-gradient(
      circle at top left,
      rgba(157, 78, 255, 0.4),
      /* Violet yang lebih cerah dan intens */ transparent 40%
    ),
    /* Glow sudut kanan atas diperkuat */
    radial-gradient(
        circle at top right,
        rgba(38, 166, 255, 0.35),
        /* Biru langit yang lebih cerah */ transparent 38%
      ),
    /* Glow tengah diperkuat */
    radial-gradient(
        circle at center,
        rgba(146, 61, 255, 0.25),
        /* Ungu medium yang lebih berani */ transparent 55%
      ),
    /* Latar belakang linear yang lebih cerah secara keseluruhan */
    linear-gradient(
        180deg,
        #0a0a0c 0%,
        /* Diperbarui dari #050507 */ #10101e 20%,
        /* Diperbarui dari #080811 */ #130f24 40%,
        /* Diperbarui dari #0a0715 */ #10101e 65%,
        /* Diperbarui dari #06060d */ #0e0e12 100% /* Diperbarui dari #040405 */
      );

  background-attachment: fixed;
}

/* MAIN WEBSITE WRAPPER */
body {
  color: white;

  /* BASE GRADIENT - Diperbarui agar lebih cerah */
  background:
    /* Glow sudut kiri atas diperkuat */
    radial-gradient(
      circle at top left,
      rgba(157, 78, 255, 0.4),
      /* Violet yang lebih cerah dan intens */ transparent 40%
    ),
    /* Glow sudut kanan atas diperkuat */
    radial-gradient(
        circle at top right,
        rgba(38, 166, 255, 0.35),
        /* Biru langit yang lebih cerah */ transparent 38%
      ),
    /* Glow tengah diperkuat */
    radial-gradient(
        circle at center,
        rgba(146, 61, 255, 0.25),
        /* Ungu medium yang lebih berani */ transparent 55%
      ),
    /* Latar belakang linear yang lebih cerah secara keseluruhan */
    linear-gradient(
        180deg,
        #0a0a0c 0%,
        /* Diperbarui dari #050507 */ #10101e 20%,
        /* Diperbarui dari #080811 */ #130f24 40%,
        /* Diperbarui dari #0a0715 */ #10101e 65%,
        /* Diperbarui dari #06060d */ #0e0e12 100% /* Diperbarui dari #040405 */
      );

  background-attachment: fixed;
}

/* ==========================
   AMBIENT GLOW LAYER
   Menambahkan kedalaman dan gerakan
========================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;

  /* Radial gradient diperkuat dan sedikit disesuaikan posisinya */
  background:
    radial-gradient(
      circle at 20% 25%,
      rgba(157, 78, 255, 0.4),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 15%,
      rgba(38, 166, 255, 0.35),
      transparent 28%
    ),
    /* Menambahkan aksen cyan untuk kesan futuristik */
    radial-gradient(circle at 50% 65%, rgba(0, 230, 255, 0.25), transparent 35%),
    radial-gradient(
      circle at 75% 85%,
      rgba(110, 140, 255, 0.3),
      transparent 32%
    );

  /* Sedikit mengurangi blur untuk definisi yang lebih baik, tapi tetap smooth */
  filter: blur(60px);
  opacity: 0.98; /* Sedikit lebih opaque */

  animation: ambientMove 15s ease-in-out infinite alternate; /* Dipercepat sedikit untuk dinamika */
}

/* ==========================
   EXTRA SOFT NOISE & GRID
   Diubah menjadi grid tipis untuk kesan futuristik/cyber
========================= */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  /* Mengganti noise acak dengan grid yang sangat halus */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  /* Grid sedikit lebih rapat untuk kesan teknologi */
  background-size: 60px 60px;
  /* Meningkatkan opasitas agar grid sedikit lebih terlihat */
  opacity: 0.4;
}

/* ==========================
   ANIMATION
   Gerakan yang sedikit lebih halus namun tetap dinamis
========================== */

@keyframes ambientMove {
  0% {
    transform: scale(1) translateY(0px) rotate(0deg);
  }

  50% {
    /* Menambahkan sedikit rotasi untuk variasi gerakan */
    transform: scale(1.05) translateY(-15px) rotate(1deg);
  }

  100% {
    transform: scale(1.01) translateY(8px) rotate(-0.5deg);
  }
}
/* ==========================
   SCROLL GLOBAL
========================== */
/* HIDE SCROLLBAR */
::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* ==========================
   STARS CONTAINER
========================== */
.stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  z-index: 2; /* 🔥 jangan 10000 */
  pointer-events: none;
  overflow: hidden;
}

/* ==========================
   STAR
========================== */
.star {
  position: absolute;

  width: 80px;
  height: 2px;

  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff);

  opacity: 0;

  transform: rotate(45deg);

  /* ✨ glow lebih terang & halus */
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #8a2be2)
    drop-shadow(2px 2px 12px #8a2be2);

  animation: shooting linear forwards; /* 🔥 bukan infinite */
}

/* ==========================
   ANIMATION
========================== */
@keyframes shooting {
  0% {
    transform: translate(-50px, -50px) rotate(45deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    transform: translate(110vw, 110vh) rotate(45deg);
    opacity: 0;
  }
}
/* ==========================
   INTRO / LOADING SCREEN
========================== */
/* INTRO CONTAINER */
#intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

#particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.content-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 90%;
  text-align: center;
}

/* NINAZEN TEXT & SHIMMER */
.brand-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
/* Warna Spesifik */
.text-white {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.text-violet {
  color: #8a2be2;
  text-shadow: 0 0 15px rgba(138, 43, 226, 0.8);
}

.ninazen-text {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: 8px;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
/* Orbit Stroke Memutar */
.orbit-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 140%;
  pointer-events: none;
}
.orbit-ring {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-top: 2px solid #8a2be2; /* Warna stroke */
  border-radius: 50%;
  filter: blur(1px) drop-shadow(0 0 5px #8a2be2);
}

.ring-1 {
  animation: rotateOrbit 2s linear infinite;
  transform: scale(0.8) rotateX(70deg);
}

.ring-2 {
  animation: rotateOrbit 3s linear reverse infinite;
  transform: scale(0.9) rotateX(60deg) rotateY(30deg);
  border-top-color: #ee82ee;
}

@keyframes rotateOrbit {
  from {
    transform: inherit rotate(0deg);
  }
  to {
    transform: inherit rotate(360deg);
  }
}

.shimmer-line {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(238, 130, 238, 0.4),
    transparent
  );
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

/* DIVIDER */
.gradient-divider {
  height: 2px;
  width: 300px;
  margin: 20px auto;
  background: linear-gradient(90deg, transparent, #8a2be2, transparent);
  box-shadow: 0 0 15px #8a2be2;
}

/* NEXT GEN TEXT */
.next-gen {
  font-size: clamp(0.9rem, 3vw, 1.5rem);
  font-weight: 700;
  letter-spacing: clamp(2px, 1vw, 5px);
  margin: 0;
  /* Gradien Blueviolet ke Violet */
  background: linear-gradient(90deg, #8a2be2, #ee82ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Efek Glow */
  filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.6));
  text-transform: uppercase;
  font-family: "Sekuya", sans-serif;
}

/* SOCIAL ICONS */
.social-icon {
  font-size: 2rem;
  color: #ffffff;
  margin: 0 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  filter: drop-shadow(0 0 5px #ffffff);
}

.social-icon:hover {
  color: #8a2be2;
  transform: translateY(-5px);
  filter: drop-shadow(0 0 15px #8a2be2);
}

/* FADE UP ANIMATIONS */
.fade-up {
  animation: fadeUp 0.8s ease forwards;
}
.fade-up-delay-1 {
  animation: fadeUp 0.8s ease 0.3s forwards;
  opacity: 0;
}
.fade-up-delay-2 {
  animation: fadeUp 0.8s ease 0.6s forwards;
  opacity: 0;
}
.fade-up-delay-3 {
  animation: fadeUp 0.8s ease 0.9s forwards;
  opacity: 0;
}

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

/* APP VISIBILITY */
#app {
  opacity: 0;
  transition: opacity 1s ease;
}

#app.show {
  opacity: 1;
}

/* ==========================
   APP VISIBILITY CONTROL
========================== */

#intro {
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(138, 43, 226, 0.3),
      transparent 40%
    ),
    radial-gradient(circle at 30% 70%, rgba(0, 0, 139, 0.3), transparent 40%),
    linear-gradient(135deg, #050508, #0b0b2f, #12002a);

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#app {
  opacity: 0;
}

#app.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.intro-logo {
  font-size: 3rem;
  color: #fff;
  animation: fadeZoom 2s ease;
}

@keyframes fadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================
   PAGE SYSTEM
========================== */
.pages {
  position: relative;
  min-height: 100vh;
  overflow: visible;
}

.page {
  position: relative; /* 🔥 GANTI */
  display: none;

  inset: 0;
  min-height: 100vh;

  opacity: 0;
  pointer-events: none;

  transform: translateY(10px);
  transition: 0.4s;
}

.page.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  display: block;
}

.nav-link.active {
  color: white;
  text-shadow: 0 0 8px blueviolet;
}

/* ==========================
   NAVBAR
========================== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: auto 1fr auto;
  position: fixed;

  padding: 0px 40px;
  width: 100%;
  top: 0;
  padding: 0 40px;
  height: 70px;
  z-index: 1000;

  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(141, 101, 250, 0.4);
  box-shadow: 0 2px 10px rgba(141, 101, 250, 0.2);
}

/* ==========================
   LOGO
========================== */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 40px;
  height: 40px;
}

.logo-svg {
  width: 140px;
  height: auto;
}

/* ==========================
   NINAZEN LOGO STYLING
========================== */
.logo-draw {
  font-family: "Sekuya", sans-serif;
  font-style: italic;
  font-size: 55px;
  letter-spacing: 2px; /* Sedikit lebih lebar agar elegan */
  fill: transparent;
  stroke: url(#gradStroke);
  stroke-width: 1.5;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;

  /* Animasi Utama */
  animation: drawText 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
  filter: drop-shadow(0 0 2px blueviolet);
}

/* Pemisahan Warna NINA (Putih) & ZEN (Blueviolet) */
.logo-draw .nina {
  transition: fill 3.5s ease;
}

.logo-draw .zen {
  fill: transparent;
  animation: zenColor 1.5s ease forwards;
  animation-delay: 3s;
}

/* ==========================
   ANIMATIONS
========================== */

/* 1. Efek Menggambar & Glow Akhir */
@keyframes drawText {
  0% {
    stroke-dashoffset: 600;
    fill: transparent;
  }
  60% {
    stroke-dashoffset: 0;
    fill: transparent;
    stroke-width: 1.5;
  }
  80% {
    fill: rgba(255, 255, 255, 0.8); /* Transisi ke putih */
    stroke-width: 0.5;
  }
  100% {
    stroke-dashoffset: 0;
    fill: white;
    stroke-width: 0;
    filter: drop-shadow(0 0 5px blueviolet) drop-shadow(0 0 10px violet);
  }
}

/* 2. Warna Spesifik untuk ZEN */
@keyframes zenColor {
  from {
    fill: transparent;
    filter: brightness(1);
  }
  to {
    fill: blueviolet;
    filter: drop-shadow(0 0 1px blueviolet);
  }
}

/* ==========================
   EXTRA "KEREN" EFFECTS
========================== */

/* Efek Kilatan Cahaya (Shimmer) */
.logo-container {
  position: relative;
  display: inline-block;
}

.logo-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-30deg);
  animation: lightSweep 6s infinite ease-in-out;
  animation-delay: 5s;
  pointer-events: none;
}

@keyframes lightSweep {
  0% {
    left: -100%;
  }
  20% {
    left: 200%;
  }
  100% {
    left: 200%;
  }
}

/* Efek Berdenyut Pelan (Floating/Pulse) */
.brand-container {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}
/* ==========================
   TAGLINE
========================== */
.logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tagline {
  font-size: 9px;
  font-style: italic;

  position: relative;
  top: -10px;

  left: -10px;
}
.next {
  color: white;
  filter: drop-shadow(0 0 10px blueviolet);
}
.changing {
  color: rgb(169, 78, 255);
  display: inline-block;
}

.slide-in {
  animation: slideIn 0.4s ease forwards;
}
.slide-out {
  animation: slideOut 0.4s ease forwards;
}
@keyframes slideIn {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
  }
}
.changing {
  filter: drop-shadow(0 0 8px violet);
}

.logo-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.logo-wrap:hover::before {
  opacity: 1;
}
.logo-wrap:hover .navbar-logo,
.logo-wrap:hover .logo-draw,
.logo-wrap:hover .tagline {
  filter: drop-shadow(0 0 5px var(--primary));
}
.navbar-logo,
.logo-draw,
.tagline {
  transition: 0.3s ease;
}
.logo-wrap:hover .logo-svg text {
  filter: drop-shadow(0 0 10px blueviolet);
}
.logo-wrap:hover .tagline {
  filter: drop-shadow(0 0 3px var(--primary)) drop-shadow(0 0 3px violet);
}
.logo-wrap::before {
  content: "";
  position: absolute;
  inset: -15px;

  background: radial-gradient(
    circle,
    rgba(141, 101, 250, 0.03),
    rgba(240, 170, 250, 0.02),
    transparent 70%
  );

  opacity: 0;
  transition: 0.3s ease;

  filter: blur(20px);
  z-index: -1;
}

.logo-wrap:hover::before {
  opacity: 1;
}
.logo-svg text,
.tagline {
  transition: 0.3s ease;
}

/* ==========================
   NAVBAR MENU
========================== */
.navbar-nav {
  display: flex;
  gap: 25px;
  justify-self: center;
  align-items: center;
  grid-column: 2; /* ⬅️ INI KUNCI */
  flex-wrap: nowrap;
  white-space: nowrap;
  height: 30px;
  margin: 0;
  transform: none;
}
.navbar-nav a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 32px;

  gap: 6px;
  font-size: 12px;
  letter-spacing: 0px;

  color: white;
  transition: 0.3s ease;
}

.navbar-nav a i {
  font-size: 15px;
}
.navbar-nav a::after {
  content: "";
  position: absolute;

  width: 0%;
  height: 2px;

  background: var(--primary);

  left: 50%;
  bottom: -15px;

  transform: translateX(-50%);
  transition: 0.3s ease;

  box-shadow: 0 0 6px rgba(141, 101, 250, 0.342);
}
.navbar-nav a:hover::after {
  width: 100%;
}
.navbar-nav a::before {
  content: "";
  position: absolute;
  inset: -6px;

  background: radial-gradient(
    circle,
    rgba(141, 101, 250, 0.247),
    transparent 70%
  );

  opacity: 0;
  transition: 0.3s ease;

  z-index: -1;
}
.navbar-nav a:hover {
  color: var(--primary);

  filter: drop-shadow(0 0 6px var(--primary));
}

.navbar-nav a:hover::before {
  opacity: 1;
}

/* ==========================
   DASHBOARD
========================== */
.navbar-nav a.dash-btn {
  position: relative;

  padding: 0 5px;

  color: white;
  text-decoration: none;
  z-index: 2;
}
.navbar-nav a.dash-btn::before {
  display: none !important;
}

/* MATIKAN EFFECT NAV BAWAAN */
.navbar-nav a.dash-btn::after {
  content: "";
  position: absolute;
  width: auto !important;
  height: auto !important;
  top: -2px;
  bottom: -2px;
  left: -10px;
  right: -10px;
  background: linear-gradient(135deg, black 20%, blueviolet 100%);
  transform: skewX(-20deg);
  z-index: -1;
}
.navbar-nav a.dash-btn::before {
  opacity: 0 !important;
}
.navbar-nav a.dash-btn span,
.navbar-nav a.dash-btn i {
  position: relative;
  z-index: 2;
}
.navbar-nav a.dash-btn:hover {
  filter: drop-shadow(0 0 5px rgba(141, 101, 250, 0.5))
    drop-shadow(0 0 10px rgba(240, 170, 250, 0.3));
}

/* ==========================
   RIGHT NAV (LANG, SEARCH, LOGIN)
========================== */
.navbar-right {
  grid-column: 3;

  display: flex;
  align-items: center;
  justify-self: end; /* 🔥 INI KUNCI */

  gap: 8px;
}

/* ==========================
   LANGUAGE SWITCH
========================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 5px 12px;

  font-size: 11px;
  letter-spacing: 1px;
  transform: skewX(-19deg);

  border-radius: 6px;
  cursor: pointer;

  position: relative;

  background: rgba(255, 255, 255, 0.03);

  transition: 0.3s ease;

  grid-column: 3;
  justify-self: end;

  box-shadow:
    0 0 3px rgba(141, 101, 250, 0.25),
    0 0 6px rgba(240, 170, 250, 0.15);
}

.lang-switch img {
  width: 16px;
  height: 12px;
  border-radius: 1px;
}

.lang-switch::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 1px;
  padding: 1px;

  background: linear-gradient(
    120deg,
    rgba(141, 101, 250, 0.7),
    rgba(240, 170, 250, 0.7)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0.6;
  transition: 0.3s ease;
}

.lang-switch:hover::before {
  opacity: 1;
}

.lang-switch:hover {
  box-shadow:
    0 0 6px rgba(141, 101, 250, 0.4),
    0 0 10px rgba(240, 170, 250, 0.2);
}

/* ==========================
   SEARCH
========================== */
.highlight {
  position: relative;

  background: linear-gradient(90deg, #8d65fa, #c084fc);
  color: #fff;

  padding: 2px 6px;
  border-radius: 4px;

  /* 🔥 biar text kebaca */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.8),
    0 0 4px rgba(0, 0, 0, 0.6);

  /* glow luar */
  box-shadow:
    0 0 6px rgba(141, 101, 250, 0.6),
    0 0 12px rgba(192, 132, 252, 0.4);

  transition: 0.2s ease;
  animation: highlightPulse 2s ease-in-out infinite;
}
.highlight.active {
  background: linear-gradient(90deg, #c084fc, #f0aafa);

  box-shadow:
    0 0 10px #c084fc,
    0 0 20px #f0aafa;

  transform: scale(1.05);
}

@keyframes highlightPulse {
  0%,
  100% {
    box-shadow:
      0 0 6px rgba(141, 101, 250, 0.6),
      0 0 12px rgba(192, 132, 252, 0.4);
  }
  50% {
    box-shadow:
      0 0 10px rgba(141, 101, 250, 0.9),
      0 0 20px rgba(192, 132, 252, 0.7);
  }
}

/* ==========================
   SEARCH ANIMATION
========================== */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 160px;
}

.input-wrapper {
  position: relative;
  transform: skewX(-19deg);
  width: 160px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  --spin-duration: 4s;
}

.search-field {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, Black 0%, blueviolet 100%);
  border: none;
  border-radius: 1px;
  padding: 0 12px 0 38px;
  font-size: 12px;
  font-family: "Archivo Black", sans-serif;
  color: rgb(211, 134, 255);
  position: relative;
  z-index: 5;
  transition: all 0.3s ease;
}

.search-field::placeholder {
  color: var(--primary);
}

.search-field:focus {
  outline: none;
  box-shadow: 0 0 20px rgba(207, 48, 170, 0.2);
}

.effect-layer {
  position: absolute;
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}

.outer-glow {
  width: 190px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(20px);
  opacity: 0.6;
  overflow: hidden;
}

.outer-glow::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(
    from 60deg at 50% 50%,
    transparent 0deg,
    var(--primary) 15deg,
    transparent 145deg,
    transparent 180deg,
    var(--secondary) 215deg,
    transparent 325deg
  );
  animation: spin-effect var(--spin-duration, 4s) linear infinite;
}

.dark-layer {
  width: 165px;
  height: 36px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(1.5px);
  overflow: hidden;
}

.dark-layer::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(
    from 82deg at 50% 50%,
    transparent 0deg,
    var(--primary) 25deg,
    transparent 75deg,
    transparent 180deg,
    var(--secondary) 205deg,
    transparent 255deg
  );
  animation: spin-effect var(--spin-duration, 4s) linear infinite;
}

.bright-layer {
  width: 160px;
  height: 34px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(1.8px);
  overflow: hidden;
}

.bright-layer::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(
    from 83deg at 50% 50%,
    transparent 0deg,
    #b5a5e8 20deg,
    transparent 60deg,
    transparent 180deg,
    #f0b0e5 200deg,
    transparent 240deg
  );
  filter: brightness(1.6);
  animation: spin-effect var(--spin-duration, 4s) linear infinite;
}

.primary-border {
  width: 162px;
  height: 34px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(0.4px);
  overflow: hidden;
}

.primary-border::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(
    from 70deg at 50% 50%,
    transparent 0deg,
    var(--primary) 20deg,
    transparent 80deg,
    transparent 180deg,
    var(--secondary) 210deg,
    transparent 270deg
  );
  filter: brightness(1.5);
  animation: spin-effect var(--spin-duration, 4s) 0.15s linear infinite;
}

.pink-hint {
  position: absolute;
  width: 30px;
  height: 20px;
  background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
  top: 18px;
  left: 20px;
  filter: blur(18px);
  opacity: 0.75;
  z-index: 4;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.input-wrapper:hover .pink-hint {
  opacity: 0;
}

.gradient-mask {
  position: absolute;
  width: 95px;
  height: 18px;
  background: linear-gradient(to right, transparent 0%, #ff004000 100%);
  top: 20px;
  left: 20px;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.search-field:focus ~ .gradient-mask {
  opacity: 0;
}

.search-button {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%) skewX(12deg);

  width: 24px;
  height: 24px;

  background: transparent;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 6;
  cursor: pointer;
}
.search-button i {
  font-size: 13px;
  color: blueviolet;

  transition: 0.3s ease;

  filter: drop-shadow(0 0 3px var(--primary));
}
.search-button:hover i {
  color: white;

  filter: drop-shadow(0 0 6px var(--primary))
    drop-shadow(0 0 10px var(--secondary));
}

.search-button:active {
  transform: translateY(-50%) scale(0.95);
}

.search-button svg {
  width: 20px;
  height: 20px;
}

.button-border-effect {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 42px;
  border-radius: 1px;
  overflow: hidden;
  z-index: 5;
}

.button-border-effect::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    transparent 0deg,
    #3c394d00 85deg,
    transparent 95deg,
    transparent 180deg,
    #3c394d00 265deg,
    transparent 275deg
  );
  filter: brightness(1.4);
  animation: spin-effect var(--spin-duration, 4s) linear infinite;
}

@keyframes spin-effect {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 400px) {
  .input-wrapper {
    width: 90vw;
    overflow: hidden;
  }

  .search-field {
    width: calc(90vw - 13px);
  }
}

.input-wrapper.searching {
  box-shadow:
    0 0 8px var(--primary),
    0 0 16px var(--secondary);
}

/* ==========================
   LOGIN BUTTON
========================== */
.login-container {
  position: relative;
  width: 90px;
  height: 32px;
}
.login-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  transform: skewX(-19deg);

  display: flex;
  align-items: center;
  justify-content: center;

  --spin-duration: 4s;
}
.login-btn {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  letter-spacing: 1px;
  text-decoration: none;

  color: rgb(211, 134, 255);

  background: linear-gradient(135deg, black 0%, blueviolet 100%);
  border: none;

  position: relative;
  z-index: 5;
}
.login-text span {
  transform: skewX(19deg);
}
.login-wrapper .outer-glow {
  width: 120px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(20px);
  opacity: 0.6;
  overflow: hidden;
}
.login-wrapper .outer-glow::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;

  background: conic-gradient(
    from 60deg,
    transparent,
    var(--primary),
    transparent,
    var(--secondary),
    transparent
  );

  animation: spin-effect var(--spin-duration) linear infinite;
}
.login-wrapper .dark-layer {
  width: 95px;
  height: 36px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(1.5px);
  overflow: hidden;
}
.login-wrapper .dark-layer::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;

  background: conic-gradient(
    from 80deg,
    transparent,
    var(--primary),
    transparent,
    var(--secondary),
    transparent
  );

  animation: spin-effect var(--spin-duration) linear infinite;
}
.login-wrapper .bright-layer {
  width: 90px;
  height: 34px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(1px);
  overflow: hidden;
}
.login-wrapper .bright-layer::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;

  background: conic-gradient(
    from 83deg,
    transparent,
    #b5a5e8,
    transparent,
    #f0b0e5,
    transparent
  );

  animation: spin-effect var(--spin-duration) linear infinite;
}
.login-wrapper .primary-border {
  width: 92px;
  height: 34px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(0.4px);
  overflow: hidden;
}
.login-wrapper .primary-border::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;

  background: conic-gradient(
    from 70deg,
    transparent,
    var(--primary),
    transparent,
    var(--secondary),
    transparent
  );

  animation: spin-effect var(--spin-duration) linear infinite;
}
.login-wrapper:hover {
  --spin-duration: 2s;
}

.login-wrapper:hover .login-btn {
  color: white;
}
.login-content {
  display: flex;
  align-items: center;
  gap: 6px;

  transform: skewX(19deg);
}
.login-content i {
  font-size: 12px;

  color: rgb(211, 134, 255);

  filter: drop-shadow(0 0 3px var(--primary));
  transition: 0.3s ease;
}
.login-wrapper:hover .login-content i {
  color: white;

  filter: drop-shadow(0 0 6px var(--primary))
    drop-shadow(0 0 10px var(--secondary));
}

/* ==========================
   BURGER MENU
========================== */
.burger-3 {
  cursor: pointer;
  margin-top: -1.1rem;
  transform: skewX(12deg);
}

.burger-3 input {
  display: none;
}

.burger-3 svg {
  height: 2.5rem;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  stroke: blueviolet;

  filter: drop-shadow(0 0 3px var(--primary));
  transition: 0.3s ease;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition:
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.burger-3 input:checked + svg {
  transform: rotate(-45deg);
}

.burger-3 input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
@media screen and (max-width: 1280px) {
  .navbar {
    height: 50px;
    padding: 0 10px;
  }

  /* LOGO */
  .logo-img {
    width: 22px;
    height: 22px;
  }

  .logo-svg {
    width: 75px;
  }

  .tagline {
    font-size: 5px;
    top: -2px;
    left: -2px;
  }

  /* NAV MENU */
  .navbar-nav {
    gap: 7px;
  }

  .navbar-nav a {
    font-size: 9px;
    padding: 4px 7px;
    height: 24px;
  }

  .navbar-nav a i {
    font-size: 9px;
  }

  /* DASH BUTTON */
  .navbar-nav a.dash-btn {
    height: 24px;
    padding: 0 10px;
    font-size: 9px;
    transform: skewX(-20deg);
  }

  .navbar-nav a.dash-btn::before {
    inset: -4px;
    filter: blur(6px);
  }

  .navbar-nav a.dash-btn span,
  .navbar-nav a.dash-btn i {
    transform: skewX(20deg);
  }

  /* RIGHT SIDE */
  .navbar-right {
    gap: 6px;
  }

  /* LANGUAGE */
  .lang-switch {
    height: 16px;
    padding: 0 6px;
  }

  .lang-switch img {
    width: 13px;
    height: 8px;
  }

  .lang-switch span {
    font-size: 8px;
  }

  /* SEARCH */
  .search-container {
    width: 90px;
  }

  .input-wrapper {
    height: 24px;
  }

  .search-field {
    font-size: 8px;
    padding-left: 22px;
  }

  .search-button {
    width: 16px;
    height: 16px;
    left: 5px;
  }

  .search-button i {
    font-size: 9px;
  }

  /* GLOW */
  .outer-glow {
    width: 100px;
    height: 42px;
  }

  .dark-layer {
    width: 88px;
    height: 28px;
  }

  .bright-layer {
    width: 82px;
    height: 26px;
  }

  .primary-border {
    width: 84px;
    height: 26px;
  }

  /* LOGIN */
  .login-container {
    width: 60px;
    height: 24px;
  }

  .login-btn {
    font-size: 8px;
  }

  .login-content {
    gap: 4px;
  }

  .login-content i {
    font-size: 9px;
  }

  /* EFFECT LAYERS */
  /* hanya kecilkan ukuran supaya tidak keluar jalur */

  .login-wrapper .outer-glow {
    width: 74px;
    height: 32px;
  }

  .login-wrapper .dark-layer {
    width: 66px;
    height: 24px;
  }

  .login-wrapper .bright-layer {
    width: 62px;
    height: 22px;
  }

  .login-wrapper .primary-border {
    width: 64px;
    height: 22px;
  }

  /* BURGER */
  .burger-wrapper {
    transform: scale(0.6);
    margin-left: -2px;
  }
}

/* ==========================
   RESPONSIVE NAVBAR (TABLET)
========================== */
@media screen and (max-width: 1024px) {
  .navbar {
    height: 42px;
    padding: 0 6px;
  }

  .logo-img {
    width: 16px;
    height: 16px;
  }
  .logo-svg {
    width: 55px;
  }

  .tagline {
    font-size: 3px;
    top: -2px;
    left: -4px;
  }

  .navbar-nav {
    gap: 4px;
    overflow: visible;
  }

  .navbar-nav a {
    font-size: 6px;
    padding: 2px 4px;
    height: 18px;
  }

  .navbar-nav a i {
    font-size: 6px;
  }

  /* DASH BUTTON */
  .navbar-nav a.dash-btn {
    height: 18px;
    padding: 0 6px;
    font-size: 6px;
    position: relative;
    transform: skewX(-20deg);
    z-index: 1;
  }

  .navbar-nav a.dash-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, black 20%, blueviolet 100%);
    transform: skewX(-20deg);
    opacity: 0.9;
    z-index: -1;
  }

  .navbar-nav a.dash-btn::before {
    content: "";
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, #8d65fa, #c084fc);
    transform: skewX(-20deg);
    opacity: 0;
    z-index: -2;
    filter: blur(5px);
    transition: 0.25s;
  }

  .navbar-nav a.dash-btn:hover::before {
    opacity: 0.6;
  }

  .navbar-nav a.dash-btn span,
  .navbar-nav a.dash-btn i {
    transform: skewX(20deg);
  }

  .navbar-right {
    gap: 4px;
  }

  .lang-switch {
    height: 13px;
    padding: 0 4px;
  }

  .lang-switch img {
    width: 10px;
    height: 6px;
  }
  .lang-switch span {
    font-size: 6px;
  }

  /* SEARCH */
  .search-container {
    width: 65px;
  }
  .input-wrapper {
    height: 20px;
  }
  .search-field {
    font-size: 6px;
    padding-left: 18px;
  }

  .search-button {
    width: 14px;
    height: 14px;
    left: 4px;
  }

  .search-button i {
    font-size: 7px;
  }

  .outer-glow {
    width: 75px;
    height: 35px;
  }
  .dark-layer {
    width: 65px;
    height: 24px;
  }
  .bright-layer {
    width: 60px;
    height: 22px;
  }
  .primary-border {
    width: 62px;
    height: 22px;
  }

  /* LOGIN */
  .login-container {
    width: 50px;
    height: 20px;
  }
  .login-btn {
    font-size: 6px;
  }

  .login-content {
    gap: 2px;
  }

  .login-content i {
    font-size: 7px;
  }

  .login-wrapper .outer-glow {
    width: 70px;
    height: 35px;
  }
  .login-wrapper .dark-layer {
    width: 60px;
    height: 24px;
  }
  .login-wrapper .bright-layer {
    width: 55px;
    height: 22px;
  }
  .login-wrapper .primary-border {
    width: 57px;
    height: 22px;
  }

  .burger-wrapper {
    transform: scale(0.45);
    margin-left: -4px;
  }
}

/* ==========================
   RESPONSIVE NAVBAR (HP)
========================== */
@media screen and (max-width: 576px) {
  .navbar {
    height: 32px;
    padding: 0 2px;
    transform: scale(0.75);
    transform-origin: top left;
    width: 133%;
  }

  .logo-img {
    width: 12px;
    height: 12px;
  }
  .logo-svg {
    width: 42px;
  }

  .tagline {
    font-size: 2px;
    top: -1px;
    left: -2px;
  }

  .navbar-nav {
    gap: 2px;
  }

  .navbar-nav a {
    font-size: 4.5px;
    padding: 1px 2px;
    height: 14px;
  }

  .navbar-nav a i {
    font-size: 4.5px;
  }

  /* DASH */
  .navbar-nav a.dash-btn {
    height: 14px;
    padding: 0 4px;
    font-size: 4.5px;
    transform: skewX(-20deg);
    position: relative;
  }

  .navbar-nav a.dash-btn::after,
  .navbar-nav a.dash-btn::before {
    transform: skewX(-20deg);
  }

  .navbar-nav a.dash-btn span,
  .navbar-nav a.dash-btn i {
    transform: skewX(20deg);
  }

  .navbar-right {
    gap: 3px;
  }

  .lang-switch {
    height: 12px;
    padding: 0 2px;
  }

  .lang-switch img {
    width: 8px;
    height: 5px;
  }
  .lang-switch span {
    font-size: 4.5;
  }

  /* ==========================
   SEARCH
========================== */
  .search-container {
    width: 65px;
    position: relative;
  }

  .input-wrapper {
    height: 18px;
    overflow: visible;
    position: relative;
  }

  .search-field {
    font-size: 6px;
    padding-left: 20px;
    padding-right: 5px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .search-button {
    width: 13px;
    height: 13px;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-button i {
    font-size: 7px;
    transition: 0.2s ease;
  }
  .input-wrapper:hover {
    box-shadow:
      0 0 4px rgba(141, 101, 250, 0.7),
      /* 🔥 dari 6 → 4 */ 0 0 7px rgba(192, 132, 252, 0.5); /* 🔥 dari 10 → 7 */
  }

  .search-container:hover .search-button i {
    transform: scale(1.1); /* 🔥 dari 1.25 → biar ga lebay */
    filter: drop-shadow(0 0 4px #8d65fa);
  }

  .search-field:focus {
    box-shadow: 0 0 5px rgba(141, 101, 250, 0.8); /* 🔥 lebih kecil */
  }
  .outer-glow {
    width: 70px; /* 🔥 dari 75 */
    height: 28px; /* 🔥 dari 32 */
    filter: blur(6px);
  }

  .dark-layer {
    width: 65px;
    height: 18px;
  }

  .bright-layer {
    width: 60px;
    height: 16px;
  }

  .primary-border {
    width: 62px;
    height: 16px;
  }

  /* ==========================
   LOGIN
========================== */
  .login-container {
    height: 18px;
    width: 46px;
  }

  /* TEXT */
  .login-btn {
    font-size: 5.5px; /* 🔥 disesuaikan biar ga mentok */
    line-height: 1;
    transition: 0.2s ease;
  }

  /* CONTENT */
  .login-content {
    gap: 2px; /* 🔥 dari 3 → biar lebih muat */
  }

  .login-content i {
    font-size: 6.5px;
    transition: 0.2s ease;
  }
  .login-wrapper:hover .login-btn {
    letter-spacing: 0.2px;
  }

  .login-wrapper:hover i {
    transform: scale(1.08); /* 🔥 FIX: jangan 0.8 (itu malah ngecil) */
    filter: drop-shadow(0 0 3px #8d65fa);
  }
  .login-wrapper .outer-glow {
    width: 55px;
    height: 26px;
    filter: blur(6px);
  }

  .login-wrapper .dark-layer {
    width: 46px;
    height: 18px;
  }

  .login-wrapper .bright-layer {
    width: 43px;
    height: 16px;
  }

  .login-wrapper .primary-border {
    width: 44px;
    height: 16px;
  }

  .burger-wrapper {
    transform: scale(0.35);
    margin-left: -2px;
  }

  .sidebar {
    background-position-y: bottom;
  }
}

/* ==========================
   RESPONSIVE NAVBAR (SMALL)
========================== */
@media screen and (max-width: 350px) {
  .navbar {
    height: 28px;
    padding: 0 4px;
    width: 100%;
    transform: none;
  }

  .logo-img {
    width: 10px;
    height: 10px;
  }
  .logo-svg {
    width: 36px;
  }

  .navbar-nav {
    display: none;
  }

  .navbar-right {
    gap: 3px;
    margin-left: auto;
  }

  .lang-switch {
    height: 10px;
    padding: 0 2px;
  }

  .lang-switch img {
    width: 8px;
    height: 5px;
  }
  .lang-switch span {
    font-size: 6;
  }

  /* ==========================
   SEARCH (LEBIH PANJANG FIX)
========================== */
  .search-container {
    width: 48px; /* 🔥 dari 38 → lebih panjang dikit */
    position: relative;
  }

  .input-wrapper {
    height: 14px;
    position: relative;
    overflow: visible;
  }

  /* input */
  .search-field {
    font-size: 4px;
    padding-left: 14px;
    padding-right: 3px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  /* icon */
  .search-button {
    width: 9px;
    height: 9px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-button i {
    font-size: 5px;
    transition: 0.2s ease;
  }

  /* hover */
  .input-wrapper:hover {
    box-shadow: 0 0 5px rgba(141, 101, 250, 0.7);
  }

  .search-container:hover .search-button i {
    transform: scale(1.15);
    filter: drop-shadow(0 0 4px #8d65fa);
  }

  /* 🔥 GLOW WAJIB IKUT WIDTH BARU */
  .outer-glow {
    width: 54px;
    height: 20px;
  }

  .dark-layer {
    width: 48px;
    height: 14px;
  }

  .bright-layer {
    width: 45px;
    height: 13px;
  }

  .primary-border {
    width: 46px;
    height: 13px;
  }
  /* ==========================
   LOGIN
========================== */
  .login-container {
    width: 35px;
    height: 14px;
    position: relative;
  }
  .login-btn {
    font-size: 5px;
    line-height: 1;
    transition: letter-spacing 0.2s ease;
  }
  .login-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
  }

  .login-content i {
    font-size: 6.5px;
    transition:
      transform 0.2s ease,
      filter 0.2s ease;
  }
  .login-wrapper:hover .login-btn {
    letter-spacing: 0.2px;
  }

  .login-wrapper:hover .login-content i {
    transform: scale(1.08);
    filter: drop-shadow(0 0 3px #8d65fa);
  }
  .login-wrapper .outer-glow {
    width: 41px; /* 🔥 dari 55 → diperkecil */
    height: 18px;
    filter: blur(5px);
  }
  .login-wrapper .dark-layer {
    width: 35px; /* 🔥 sama persis */
    height: 14px;
  }

  /* layer dalam */
  .login-wrapper .bright-layer {
    width: 32px;
    height: 12px;
  }

  /* border */
  .login-wrapper .primary-border {
    width: 33px;
    height: 12px;
  }

  /* ==========================
   BURGER
========================== */
  .burger-wrapper {
    transform: scale(0.4);
    margin-left: 0;
  }
}
/* ==========================
   SIDEBAR
========================== */
.sidebar {
  position: fixed;
  right: -100%;

  top: var(--nav-height);
  height: calc(100dvh - var(--nav-height) + 10px);

  width: 260px;

  overflow-y: auto;
  overflow-x: hidden;

  background: rgba(39, 24, 41, 0.425);
  backdrop-filter: blur(20px);

  border-left: 1px solid rgba(255, 255, 255, 0.05);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transition: 0.4s ease;
  z-index: 999;
  margin-top: -1px;
}

.sidebar.active {
  right: 0;
}

.sidebar-content {
  padding: 20px;
}

.sidebar-section {
  margin-bottom: 20px;
}

.sidebar-section h4 {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  transform: skewX(-15deg);

  padding: 8px 10px;
  margin-bottom: 5px;

  text-decoration: none;
  color: white;
  font-size: 13px;

  border-radius: 1px;

  transition: 0.2s;
}

.sidebar a:hover {
  background: none;

  box-shadow:
    0 0 8px rgba(138, 43, 226, 0.4),
    0 0 16px rgba(75, 0, 130, 0.3);
}

/* ICON */
.sidebar a span,
.sidebar a i {
  transform: skewX(15deg);
}

/* ==========================
   DASHBOARD SIDEBAR
========================== */
.dash-btn-sidebar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 14px;

  color: white !important;
  text-decoration: none;
  font-size: 13px;

  transform: skewX(-15deg);
  overflow: hidden;

  background: linear-gradient(135deg, black 30%, blueviolet 100%);
  z-index: 2;
}

.dash-btn-sidebar span,
.dash-btn-sidebar i {
  transform: skewX(15deg);
  position: relative;
  z-index: 3;
}

.dash-btn-sidebar::before {
  content: "";
  position: absolute;
  inset: -50%;

  background: conic-gradient(
    transparent,
    rgba(138, 43, 226, 0.6),
    transparent,
    rgba(138, 43, 226, 0.6),
    transparent
  );

  animation: spin 4s linear infinite;
  z-index: 0;
}

.dash-btn-sidebar::after {
  content: "";
  position: absolute;
  inset: 2px;

  background: linear-gradient(135deg, black 30%, blueviolet 100%);
  z-index: 1;
}

.dash-btn-sidebar:hover {
  box-shadow:
    0 0 8px blueviolet,
    0 0 16px purple;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================
   BUTTON LOGIN SIDEBAR
========================== */
.sb-login-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.sb-login-wrapper {
  position: relative;

  width: 80%;
  height: 35px;

  transform: skewX(-15deg);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.sb-login-btn {
  position: relative;
  z-index: 3;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  font-size: 13px;

  color: rgb(211, 134, 255);
}

.sb-login-content {
  display: flex;
  align-items: center;
  gap: 6px;

  transform: skewX(15deg);
}

/* ICON */
.sb-login-content i {
  font-size: 13px;
  color: blueviolet;

  filter: drop-shadow(0 0 3px var(--primary));
}

.sb-login-wrapper::before {
  content: "";
  position: absolute;

  width: 200%;
  height: 200%;

  top: -50%;
  left: -50%;

  background: conic-gradient(
    transparent,
    var(--primary),
    transparent,
    var(--secondary),
    transparent
  );

  animation: sb-spin 4s linear infinite;
  z-index: 0;
}

.sb-login-wrapper::after {
  content: "";
  position: absolute;
  inset: 2px;

  background: linear-gradient(135deg, black 30%, blueviolet 100%);
  z-index: 1;
}

.sb-login-wrapper:hover .sb-login-btn {
  color: white;
}

.sb-login-wrapper:hover .sb-login-content i {
  color: white;
  filter: drop-shadow(0 0 6px var(--primary))
    drop-shadow(0 0 10px var(--secondary));
}

@keyframes sb-spin {
  to {
    transform: rotate(360deg);
  }
}

.sidebar-bottom {
  position: relative;
  padding: 15px;
}

.sidebar-bottom::before {
  content: "";
  position: absolute;

  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(138, 43, 226, 0.8),
    rgba(200, 120, 255, 0.8),
    transparent
  );

  box-shadow:
    0 0 6px rgba(138, 43, 226, 0.6),
    0 0 12px rgba(200, 120, 255, 0.4);

  border-radius: 10px;
}
/* ==========================
   HERO LAYOUT
========================== */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden; /* Mencegah elemen meluber */
}
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 100vh;
  width: 100%;

  padding: 100px 80px;
  box-sizing: border-box;

  overflow: hidden;
}

.hero-left {
  flex: 0 0 50%;
  max-width: 600px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-right {
  flex: 0 0 50%;

  position: relative;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  min-height: 500px;
}

/* ==========================
   BACKGROUND
========================== */
/* VIDEO */
.bg-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY UTAMA */
.bg-dark {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bg-dark::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 70% 50%,
    rgba(138, 43, 226, 0.25),
    transparent 60%
  );

  pointer-events: none;
}

/* OVERLAY IMAGE */
.bg-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 1; /* biar transparan */
  pointer-events: none;
}
/* ==========================
   LEFT
========================== */
.logo {
  width: 90px;
  height: auto;
  display: block;
  position: relative;
  z-index: 4;

  /* State Awal untuk Animasi Masuk */
  opacity: 0;
  transform: translateY(20px);

  /* Gabungan Animasi: Fade Up di awal & Glow Pulse setelah muncul */
  /* Logo muncul di detik ke 1.5 (sesuaikan dengan selera) */
  animation:
    logoFadeUp 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards 1.5s,
    logoPulseGlow 4s ease-in-out infinite 2.7s;
  animation: logoFade 0.8s ease forwards;

  /* Transisi untuk efek Hover */
  transition:
    transform 0.3s ease,
    filter 0.3s ease;

  /* Glow tetap (Initial state) */
  filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.4));
}

/* --- ANIMASI MASUK (FADE UP) --- */
@keyframes logoFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* hover glow */
.logo:hover {
  filter: drop-shadow(0 0 10px white) drop-shadow(0 0 20px blueviolet);
  transform: scale(1.05);
}

/* animasi masuk */
@keyframes logoFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- ANIMASI IDLE (GLOW BERNAFAS) --- */
@keyframes logoPulseGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.7));
  }
}
/* hover glow */
.logo:hover {
  filter: drop-shadow(0 0 10px violet) drop-shadow(0 0 20px blueviolet);
  transform: scale(1.05);
}

/* TITLE */
.hero-title {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 5px;
  transform: skewX(-16deg);
  cursor: pointer;
  position: relative;
  display: inline-block;
  user-select: none; /* Biar ga gampang keselekursor saat diblok */
}

/* --- 1. ANIMASI FADE UP & PENGATURAN DASAR --- */
.text-nina,
.text-zen {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  /* Animasi FadeUp, ditumpuk dengan animasi IdleGlow */
  animation: fadeUpCinematic 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  position: relative;
}

.text-nina {
  color: white;
  /* Delay loading: 2.0s */
  animation-delay: 2s;
}

.text-zen {
  color: blueviolet;
  /* Delay loading: 2.5s (0.5s setelah NINA) */
  animation-delay: 2.5s;
}

@keyframes fadeUpCinematic {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 2. IDLE GLOW BERDENYUT (Baru) --- */
/* Pseudo-element ::before digunakan khusus untuk cahaya latar yang lembut */
.text-nina::before,
.text-zen::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Berada di belakang teks asli */
  opacity: 0; /* Mulai dari ga kelihatan */
  /* Animasi muncul setelah FadeUp, lalu berdenyut */
  animation: idleGlowPulse 4s ease-in-out infinite 3s; /* Delay 3s biar nunggu FadeUp beres */
}

.text-nina::before {
  color: blueviolet;
  filter: blur(10px); /* Bikin blur buat efek pendaran */
}

.text-zen::before {
  color: blueviolet;
  filter: blur(12px);
}

@keyframes idleGlowPulse {
  0%,
  100% {
    opacity: 0.5;
    filter: blur(10px);
  }
  50% {
    opacity: 0.8;
    filter: blur(15px);
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.5); /* Sedikit tambahan glow di tengah */
  }
}

/* --- 3. ANIMASI IDLE: GLITCH PETIR (Tetap Setiap 5 Detik) --- */
/* Pseudo-element ::after digunakan untuk efek distorsi petir */
.text-nina::after,
.text-zen::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2; /* Di depan teks asli */
}

.text-nina::after,
.text-zen::after {
  /* Jeda 4s agar tidak bentrok dengan awal FadeUp */
  animation: lightningGlitch 5s infinite 4s;
}

@keyframes lightningGlitch {
  0%,
  94%,
  100% {
    opacity: 0;
    transform: translate(0);
    clip-path: inset(0 0 0 0);
  }
  95% {
    opacity: 1;
    transform: translate(3px, -2px);
    color: cyan;
    clip-path: inset(40% 0 30% 0);
  }
  96% {
    opacity: 1;
    transform: translate(-3px, 2px);
    color: magenta;
    clip-path: inset(10% 0 80% 0);
  }
  97% {
    opacity: 0.8;
    transform: translate(5px, 0);
    color: white;
    text-shadow: 0 0 15px blueviolet;
  }
  98% {
    opacity: 0;
    transform: translate(0);
    clip-path: inset(0 0 0 0);
  }
}

/* --- 4. HOVER GLOW EFFECT (Tetap) --- */
/* Saat cursor mendekat, glow menjadi sangat kuat dan tajam */
.hero-title:hover {
  transition: 0.3s;
}

.hero-title:hover .text-nina {
  text-shadow:
    0 0 25px rgba(138, 43, 226, 1),
    0 0 50px rgba(138, 43, 226, 0.7),
    0 0 80px rgba(138, 43, 226, 0.4);
  transition: 0.3s;
}

.hero-title:hover .text-zen {
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.4);

  transition: 0.3s;
}
/* TAGLINE */
.hero-tagline {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  transform: skewX(-16deg);
  margin-top: 5px;
  display: block;
  cursor: default;

  /* --- GRADIENT VIOLET KE BLUEVIOLET --- */
  background: linear-gradient(90deg, blueviolet, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* --- FADE UP AWAL --- */
  opacity: 0;
  transform: translateY(10px);
  /* Muncul terakhir setelah ZEN */
  animation: taglineFadeUp 1s ease-out forwards 3.2s;

  /* --- IDLE GLOW (Nyala Terus Lembut) --- */
  /* Menggunakan drop-shadow agar warna gradasi ikut berpendar */
  filter: drop-shadow(0 0 5px blueviolet);

  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

/* Animasi Masuk */
@keyframes taglineFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- HOVER EFFECT: GLOW MENYALA --- */
.hero-tagline:hover {
  /* Glow lebih tajam saat cursor mendekat */
  filter: drop-shadow(0 0 12px blueviolet)
    drop-shadow(0 0 20px rgba(137, 43, 226, 0.808));
  transform: translateY(-2px); /* Sedikit naik saat di-hover */
}
/* TYPING */
.hero-typing {
  margin-top: 14px;
  font-size: 16px;
  min-height: 22px;
  letter-spacing: 1px;
  font-family: "Archivo Black", sans-serif;

  /* Gradien Putih ke Blueviolet (sesuai request sebelumnya) */
  background: linear-gradient(90deg, var(--primary), violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* State Awal & Fade Up */
  opacity: 0;
  transform: translateY(10px);
  animation: typingFadeUp 1s ease-out forwards 4s; /* Muncul setelah tagline */

  /* Glow Idle Tipis */
  filter: drop-shadow(0 0 5px rgba(128, 0, 255, 0.3));
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

/* Icon Terminal */
.hero-typing i {
  margin-right: 8px;
  font-size: 15px;
  /* Icon tidak pakai gradien agar lebih solid */
  -webkit-text-fill-color: blueviolet;
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.5));
}

/* Kursor Terminal */
.hero-typing::after {
  content: "|";
  margin-left: 5px;
  -webkit-text-fill-color: #c084fc;
  animation: hero-blink 1s infinite;
  filter: drop-shadow(0 0 5px #c084fc);
}

/* Animasi Fade Up */
@keyframes typingFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* --- HOVER EFFECT: GLOW MENYALA --- */
.hero-typing:hover {
  filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 20px #c084fc);
  transform: translateX(5px);
  cursor: pointer;
}
/* TEXT */
.hero-description {
  margin-top: 15px; /* Sedikit lebih rapat dengan typing section */
  max-width: 350px;
}

.hero-description p {
  font-size: 0.8rem; /* Ukuran font diperkecil sedikit agar elegan */
  font-weight: 500;
  color: rgba(
    255,
    255,
    255,
    0.6
  ); /* Warna lebih redup agar title tetap dominan */
  margin: 2px 0; /* Jarak antar baris sangat tipis */
  letter-spacing: 1px;

  /* Animasi Fade Up */
  opacity: 0;
  transform: translateY(10px);
  animation: descFadeUp 0.8s ease-out forwards 4.8s;

  transition: all 0.3s ease;
}

/* Glow Effect saat Hover */
.hero-description:hover p {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Kasih warna blueviolet tipis di baris terakhir agar matching */
.hero-description p:last-child {
  color: rgba(192, 132, 252, 0.7);
}

@keyframes descFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* SERVER INFO */
.server-info {
  margin-top: 25px;
  display: flex;
  gap: 20px;
  font-family: "Archivo Black", sans-serif;

  /* State Awal & Fade Up */
  opacity: 0;
  transform: translateY(10px);
  /* Muncul paling akhir (detik ke 5.5) */
  animation: serverFadeUp 1s ease-out forwards 5.5s;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 15px;
  border-radius: 50px; /* Bentuk kapsul */
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.info-item .label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 600;
}

.info-item .value {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* --- STATUS INDICATOR (DOT) --- */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}

/* Variasi Hijau (Online) */
.status-online .status-dot {
  background-color: #2ecc71;
  box-shadow:
    0 0 10px #2ecc71,
    0 0 20px rgba(46, 204, 113, 0.4);
  animation: pulseGreen 2s infinite;
}

/* Variasi Merah (Offline) - Ganti class di HTML ke .status-offline jika ingin tes */
.status-offline .status-dot {
  background-color: #e74c3c;
  box-shadow:
    0 0 10px #e74c3c,
    0 0 20px rgba(231, 76, 60, 0.4);
}

.status-offline .value {
  color: #e74c3c;
  text-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
}

/* --- ANIMASI --- */
@keyframes serverFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGreen {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- HOVER EFFECT --- */
.info-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: blueviolet;
  transform: translateY(-3px);
  cursor: pointer;
}

.info-item:hover .ip-address {
  color: rgb(255, 96, 247);
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
  filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.5));
}
/* ==========================
   BUTTONS (FIXED & ALIGNED)
========================== */
.hero-buttons {
  margin-top: 25px;
  display: flex;
  gap: 15px;
  opacity: 0;
  transform: translateY(20px);
  animation: ninaReveal 0.8s ease-out forwards 6s;
}

/* BASE BUTTON */
.nina-btn {
  position: relative;
  height: 46px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border: none;
  overflow: hidden;
  background: transparent;
  transform: skewX(-20deg);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); /* Lebih smooth */
}

/* KONTEN */
.btn-content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-family: "Archivo Black", sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  transform: skewX(20deg);
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* --- EFEK SCANLINE (BARU) --- 
   Cahaya putih vertikal yang menyapu tombol secara otomatis */
.nina-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(45deg);
  z-index: 3;
  animation: scanline 4s linear infinite;
}

/* --- WARNA & BACKGROUND --- */
.play-btn {
  background: linear-gradient(135deg, blueviolet, #4b0082);
  box-shadow:
    0 4px 15px rgba(138, 43, 226, 0.3),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.start-btn {
  /* Diperkuat efek glassmorphism-nya */
  background: rgba(138, 43, 226, 0.15);
  box-shadow:
    inset 0 0 0 1px rgba(138, 43, 226, 0.5),
    inset 0 0 15px rgba(138, 43, 226, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --- ANIMASI GLOW LINE (DIPERTAJAM) --- */
.glow-line {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  z-index: 4;
}

.nina-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(20deg, transparent, #ffffff, transparent);
  z-index: 4;
}

/* --- HOVER UPGRADE --- */
.nina-btn:hover {
  filter: brightness(1.3);
  box-shadow:
    0 0 30px rgba(138, 43, 226, 0.6),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Teks sedikit naik saat hover */
.nina-btn:hover .btn-content {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  transform: skewX(20deg) scale(1.05);
}

.nina-btn:hover .glow-line {
  animation: lineForward 1.2s linear infinite;
}
.nina-btn:hover::after {
  animation: lineBackward 1.2s linear infinite;
}

/* --- KEYFRAMES --- */
@keyframes scanline {
  0% {
    left: -150%;
  }
  20% {
    left: 150%;
  } /* Menyapu cepat */
  100% {
    left: 150%;
  } /* Jeda waktu diam */
}

@keyframes lineForward {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes lineBackward {
  0% {
    right: -100%;
  }
  100% {
    right: 100%;
  }
}

@keyframes ninaReveal {
  to {
    opacity: 1;
    transform: translateY(0) skewX(-20deg);
  }
}

/* CLICK FEEDBACK */
.nina-btn:active {
  transform: scale(0.95) skewX(-20deg);
  filter: brightness(0.9);
}
/* SOSMED */
/* --- CONTAINER --- */
.social-wapper {
  width: 100%;
  display: flex;
  margin-top: 35px;
}

.social-contain {
  display: flex;
  gap: 15px;
  opacity: 0;
  transform: translateY(20px);
  margin-top: -15px;
  margin-left: 60px; /* Geser sedikit ke kanan */
  animation: ninaRevealSocial 0.8s ease-out forwards 6.5s;
}

/* --- STATE NORMAL (BULAT & TRANSPARAN) --- */
.social-item {
  display: flex;
  align-items: center;
  justify-content: center; /* Senter icon saat bulat */
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.05); /* Transparan */
  backdrop-filter: blur(8px);
  border-radius: 50%; /* Lingkaran Sempurna */
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.social-item i {
  font-size: 18px;
  transition: all 0.3s ease;
}

.social-name {
  font-family: "Archivo Black", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 0;
  width: 0; /* Sembunyi awal */
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}

/* --- STATE HOVER (BULAT PANJANG & SOLID) --- */
.social-item:hover {
  width: 160px; /* Memanjang jadi kapsul */
  border-radius: 30px; /* Bentuk Kapsul */
  justify-content: flex-start;
  padding: 0 20px;
  transform: translateY(1px);
  border-color: transparent; /* Hilangkan border saat solid */
}

.social-item:hover i {
  color: white !important; /* Icon jadi putih di bg solid */
  margin-right: 12px;
}

.social-item:hover .social-name {
  width: auto;
  opacity: 1;
}

/* --- WARNA SPESIFIK (SAAT HOVER MENJADI SOLID) --- */

/* Discord */
.discord {
  color: #5865f2;
} /* Warna icon awal */
.discord:hover {
  background: #5865f2 !important; /* Solid Biru */
  box-shadow: 0 10px 20px rgba(88, 101, 242, 0.4);
}

/* Instagram */
.instagram {
  color: #e1306c;
}
.instagram:hover {
  background: linear-gradient(
    45deg,
    #f09433,
    #e31683,
    #bc1888
  ) !important; /* Solid IG */
  box-shadow: 0 10px 20px rgba(225, 48, 108, 0.4);
}

/* TikTok */
.tiktok {
  color: #490000;
}
.tiktok:hover {
  background: #000000 !important; /* Solid Hitam */
  box-shadow:
    5px 0 15px rgba(255, 0, 80, 0.3),
    -5px 0 15px rgba(0, 242, 234, 0.3);
}

/* YouTube */
.youtube {
  color: #ff0000;
}
.youtube:hover {
  background: #ff0000 !important; /* Solid Merah */
  box-shadow: 0 10px 20px rgba(255, 0, 0, 0.4);
}

/* Animasi Masuk */
@keyframes ninaRevealSocial {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================
   RIGHT
========================== */
/* TERMINAL */
.terminal {
  width: 300px;
  height: 180px;
  position: relative;

  z-index: 5;

  background: rgba(13, 17, 23, 0.55);
  backdrop-filter: blur(10px);

  border-radius: 12px;
  transform: none;
  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(0, 255, 255, 0.05);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  font-family: monospace;
  opacity: 0;
  animation: fadeUp 2s ease-out forwards;
}

/* LIGHT REFLECTION */
.terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08),
    transparent 40%
  );
  pointer-events: none;
}

/* HEADER */
.terminal-header {
  height: 36px;

  background: rgba(22, 27, 34, 0.7);

  display: flex;
  align-items: center;

  padding: 0 12px;

  gap: 8px;
}

/* DOT */
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
}

.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.7;
}

.red {
  background: #ff5f56;
}
.red::after {
  background: #ff5f56;
  animation: pulse 3s infinite;
}

.yellow {
  background: #ffbd2e;
}
.yellow::after {
  background: #ffbd2e;
  animation: pulse 4s infinite;
}

.green {
  background: #27c93f;
}
.green::after {
  background: #27c93f;
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
}

/* BODY */
.terminal-body {
  flex: 1;
  padding: 10px;
  font-size: 10px;
  color: #c9d1d9;
  overflow-y: auto;
  white-space: pre-line;
}

/* COLORS */
.green-text {
  color: #3fb950;
}
.blue-text {
  color: #58a6ff;
}
.yellow-text {
  color: #e3b341;
}
.red-text {
  color: #ff7b72;
}

/* INPUT */
.terminal-input {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.prompt {
  color: #58deff;
  margin-right: 6px;

  cursor: pointer;

  transition:
    color 0.25s ease,
    text-shadow 0.25s ease,
    transform 0.25s ease;
}

.prompt:hover {
  color: white;

  text-shadow:
    0 0 10px #58deff,
    0 0 20px #58deff;

  transform: scale(1.08);
}

.prompt:active {
  transform: scale(0.92);
}

input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: monospace;
  flex: 1;
  z-index: 2;
}

/* PLACEHOLDER */
.placeholder {
  position: absolute;
  left: 22px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* CURSOR */
.cursor {
  width: 8px;
  height: 16px;
  background: #fff;
  margin-left: 3px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   MOBILE PORTRAIT (PHONES)
========================================================= */
@media (max-width: 900px) and (orientation: portrait) {
  .hero-content {
    flex-direction: column;
    justify-content: center;

    padding: 70px 24px 40px;

    min-height: 100vh;

    box-sizing: border-box;
  }

  /* =========================
     LEFT
  ========================= */
  .hero-left {
    width: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
  }

  /* HIDE TERMINAL */
  .hero-right {
    display: none !important;
  }

  /* =========================
     LOGO
  ========================= */
  .logo {
    width: 70px;
  }

  /* =========================
     TITLE
  ========================= */
  .hero-title {
    font-size: 2rem;

    line-height: 1.1;

    letter-spacing: 1px;
  }

  .hero-tagline {
    font-size: 0.72rem;

    letter-spacing: 2px;

    margin-top: 6px;
  }

  .hero-typing {
    font-size: 11px;

    margin-top: 8px;

    min-height: 14px;
  }

  .hero-typing i {
    font-size: 10px;

    margin-right: 6px;
  }

  /* =========================
     DESCRIPTION
  ========================= */
  .hero-description {
    max-width: 100%;

    margin-top: 16px;
  }

  .hero-description p {
    font-size: 0.78rem;

    line-height: 1.7;

    letter-spacing: 0.3px;

    color: rgba(255, 255, 255, 0.72);
  }

  /* =========================
     SERVER INFO
  ========================= */
  .server-info {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;
  }

  .info-item {
    padding: 7px 12px;

    border-radius: 999px;

    gap: 6px;
  }

  .info-item .label {
    font-size: 0.6rem;
  }

  .info-item .value {
    font-size: 0.62rem;
  }

  .status-dot {
    width: 6px;
    height: 6px;
  }

  /* =========================
     BUTTONS
  ========================= */
  .hero-buttons {
    margin-top: 20px;

    gap: 10px;

    flex-wrap: wrap;
  }

  .nina-btn {
    height: 38px;

    padding: 0 16px;
  }

  .btn-content {
    font-size: 8px;

    gap: 6px;

    letter-spacing: 1px;
  }
  /* RESPONSIVE HP SOCIAL */

  .social-wapper {
    margin-top: 14px;
    transform: translate(-15px, 10px);
  }
}

/* =========================================================
   RESPONSIVE TABLET / SMALL LAPTOP
========================================================= */
@media (max-width: 1100px) {
  .logo {
    width: 58px;
  }

  .hero-title {
    font-size: 1.55rem;

    letter-spacing: 1px;
  }

  .hero-tagline {
    font-size: 0.62rem;

    letter-spacing: 1px;

    margin-top: 3px;
  }

  .hero-typing {
    font-size: 10px;

    margin-top: 6px;

    min-height: 12px;
  }

  .hero-typing i {
    font-size: 9px;

    margin-right: 5px;
  }

  .hero-description {
    max-width: 260px;

    margin-top: 10px;
  }

  .hero-description p {
    font-size: 0.62rem;

    line-height: 1.45;
  }

  .server-info {
    gap: 7px;

    margin-top: 12px;
  }

  .info-item {
    padding: 4px 9px;

    gap: 5px;
  }

  .info-item .label {
    font-size: 0.58rem;
  }

  .info-item .value {
    font-size: 0.6rem;
  }

  .status-dot {
    width: 5px;
    height: 5px;
  }

  .hero-buttons {
    margin-top: 14px;

    gap: 7px;

    flex-wrap: wrap;
  }

  .nina-btn {
    height: 30px;

    padding: 0 12px;
  }

  .btn-content {
    font-size: 6px;

    gap: 4px;

    letter-spacing: 0.5px;
  }

  .social-wapper {
    margin-top: 14px;
    transform: translate(-30px, 10px);
  }

  .social-contain {
    gap: 7px;

    flex-wrap: wrap;
  }

  .social-item {
    width: 24px;
    height: 24px;
  }

  .social-item i {
    font-size: 10px;
  }

  .social-item:hover {
    width: 75px;

    padding: 0 8px;
  }

  .social-item:hover i {
    color: white !important;

    margin-right: 5px;
  }

  .social-name {
    font-size: 6px;
  }
}
/* =========================================================
   TERMINAL RESPONSIVE
========================================================= */

/* TABLET */
@media (max-width: 1200px) {
  .terminal {
    width: 210px;
    height: 125px;

    border-radius: 10px;
  }

  .terminal-header {
    height: 24px;

    padding: 0 8px;

    gap: 5px;
  }

  .terminal-brand {
    margin-left: auto;

    font-size: 8px;

    letter-spacing: 2px;

    opacity: 0.8;
  }

  .terminal-body {
    padding: 6px;

    font-size: 7px;

    line-height: 1.4;
  }

  .terminal-input {
    padding: 5px;
  }

  .prompt,
  input,
  .placeholder {
    font-size: 7px;
  }

  .dot {
    width: 6px;
    height: 6px;
  }

  .cursor {
    width: 3px;
    height: 8px;
  }
}

/* LANDSCAPE */
@media (max-width: 760px) and (orientation: landscape) {
  .terminal {
    width: 170px;
    height: 100px;

    border-radius: 8px;
  }

  .terminal-header {
    height: 20px;

    padding: 0 6px;

    gap: 4px;
  }

  .terminal-brand {
    margin-left: auto;

    font-size: 3px;

    letter-spacing: 1px;
  }

  .terminal-body {
    padding: 5px;

    font-size: 6px;

    line-height: 1.3;
  }

  .terminal-input {
    padding: 4px;
  }

  .prompt,
  input,
  .placeholder {
    font-size: 6px;
  }

  .cursor {
    width: 2px;
    height: 6px;
  }

  .dot {
    width: 5px;
    height: 5px;
  }
}

/* MOBILE PORTRAIT */
@media (max-width: 760px) and (orientation: portrait) {
  .terminal {
    display: none !important;
  }
}

/* ==========================================
   POWERING OUR NETWORK
========================================== */

.powering-network {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);
}

.powering-header {
  text-align: center;
  margin-bottom: 35px;
}

.powering-badge {
  display: inline-block;
  padding: 10px 22px;
  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);
  border: 1px solid rgba(138, 43, 226, 0.3);
  color: #c084fc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
}

.powering-header h2 {
  margin-top: 20px;
  color: white;
  font-size: 3rem;
}

.powering-header p {
  max-width: 700px;
  margin: 15px auto 0;
  color: #94a3b8;
  line-height: 1.8;
}

.powering-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 50px;
}

.power-stat {
  text-align: center;
}

.power-stat h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;

  font-size: 2.2rem;
  font-weight: 800;

  color: #c084fc;

  text-shadow:
    0 0 10px rgba(192, 132, 252, 0.5),
    0 0 25px rgba(138, 43, 226, 0.3);

  margin-bottom: 8px;
}

.power-stat .counter {
  color: #c084fc;
}

.power-stat h3 span:last-child {
  color: #c084fc;

  opacity: 0.9;
}

.power-stat > span {
  color: #94a3b8;

  font-size: 14px;

  letter-spacing: 1px;
}

.power-stat span {
  color: #94a3b8;
}

/* MARQUEE */

.logo-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 22px;
}

.logo-marquee::before,
.logo-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 180px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logo-marquee::before {
  left: 0;
  background: linear-gradient(to right, #090014, transparent);
}

.logo-marquee::after {
  right: 0;
  background: linear-gradient(to left, #090014, transparent);
}

.logo-track {
  display: flex;
  gap: 20px;
  width: max-content;

  animation: marqueeLeft 150s linear infinite;
}

.reverse .logo-track {
  animation: marqueeRight 150s linear infinite;
}

.logo-item {
  display: flex;
  align-items: center;
  gap: 12px;

  position: relative;
  overflow: hidden;

  min-width: 230px;

  padding: 18px 25px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(138, 43, 226, 0.15);

  backdrop-filter: blur(12px);

  color: rgba(255, 255, 255, 0.75);

  transition: 0.35s ease;

  pointer-events: none; /* Tidak bisa diklik */

  user-select: none;

  white-space: nowrap;
}

.logo-item::before {
  content: "";

  position: absolute;

  top: 0;
  left: -150%;

  width: 60%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );

  transition: 0.8s;
}

.logo-item i {
  font-size: 20px;

  color: #a855f7;

  transition: 0.35s ease;
}

/* Hanya glow saat cursor mendekat */

.logo-item:hover {
  color: white;

  border-color: rgba(168, 85, 247, 0.45);

  background: rgba(138, 43, 226, 0.06);

  box-shadow:
    0 0 25px rgba(138, 43, 226, 0.18),
    0 0 50px rgba(59, 130, 246, 0.08);
}

.logo-item:hover::before {
  left: 150%;
}

.logo-item:hover i {
  color: #c084fc;

  filter: drop-shadow(0 0 8px #c084fc);
}

/* ANIMATION */

@keyframes marqueeLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 10px));
  }
}

@keyframes marqueeRight {
  from {
    transform: translateX(calc(-50% - 10px));
  }

  to {
    transform: translateX(0);
  }
}

/* ==========================================
   LARGE TABLET
========================================== */

@media (max-width: 992px) {
  .powering-header h2 {
    font-size: 2.4rem;
  }

  .powering-header p {
    max-width: 650px;
    font-size: 14px;
  }

  .powering-stats {
    gap: 35px;
  }

  .power-stat h3 {
    font-size: 1.8rem;
  }

  .logo-track {
    gap: 16px;
  }

  .logo-item {
    min-width: 190px;
    padding: 15px 18px;
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {
  .powering-network {
    padding: 70px 0;
  }

  .powering-header {
    padding: 0 15px;
  }

  .powering-header h2 {
    font-size: 2rem;
  }

  .powering-header p {
    font-size: 13px;
  }

  .powering-stats {
    gap: 25px;
    margin-bottom: 35px;
  }

  .power-stat h3 {
    font-size: 1.5rem;
  }

  .power-stat > span {
    font-size: 12px;
  }

  .logo-track {
    gap: 12px;
  }

  .logo-item {
    min-width: 170px;
    padding: 13px 15px;
    font-size: 12px;
    gap: 8px;
  }

  .logo-item i {
    font-size: 15px;
  }
}

/* ==========================================
   SMALL PHONE
========================================== */

@media (max-width: 480px) {
  .powering-network {
    padding: 60px 0;
  }

  .powering-badge {
    font-size: 9px;
    padding: 7px 14px;
    letter-spacing: 2px;
  }

  .powering-header h2 {
    font-size: 1.7rem;
  }

  .powering-header p {
    font-size: 12px;
    max-width: 320px;
  }

  .powering-stats {
    gap: 18px;
    margin-bottom: 28px;
  }

  .power-stat h3 {
    font-size: 1.2rem;
  }

  .power-stat > span {
    font-size: 11px;
  }

  .logo-item {
    min-width: 145px;
    padding: 11px 12px;
    font-size: 11px;
  }

  .logo-item i {
    font-size: 14px;
  }
}

/* =========================================================
   LIVE CHAT
========================================================= */
.live-dashboard-section {
  padding: 120px 5%;
  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.45), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 174, 255, 0.28),
      transparent 35%
    ),
    radial-gradient(
      circle at left center,
      rgba(255, 0, 255, 0.18),
      transparent 30%
    ),
    linear-gradient(180deg, #0a0a14 0%, #11162a 40%, #090912 100%);
  overflow: hidden;
}

.dashboard-container {
  display: grid;
  grid-template-columns: 0.8fr 1.6fr;
  gap: 40px;
  align-items: stretch;
}

/* Base Card Style */
.dashboard-card {
  background: rgba(15, 5, 25, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid #8a2be2;
  border-radius: 0;
  position: relative;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  overflow: hidden;
}

/* Glow tipis animated */
.dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(138, 43, 226, 0.08),
    rgba(0, 242, 255, 0.06),
    transparent
  );
  background-size: 250% 250%;
  animation: dashboardGlow 8s linear infinite;
  pointer-events: none;
}

/* Chat */
.terminal-box {
  display: flex;
  flex-direction: column;
  height: 400px; /* TINGGI UTAMA */
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.08);
}

/* Map */
.map-box {
  height: 400px; /* SAMAKAN */
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.08);
}

/* Hover */
.dashboard-card:hover {
  transform: translateY(-4px);
  border-color: #00f2ff;
  box-shadow:
    0 0 12px rgba(0, 242, 255, 0.15),
    0 0 30px rgba(138, 43, 226, 0.12);
}

/* Header */
.card-header {
  background: #8a2be2;
  color: white;
  padding: 8px 15px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}
/* TERMINAL DOTS */
.terminal-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.term-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  position: relative;
}

/* Glow */
.term-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.7;
}

/* RED */
.term-red {
  background: #ff5f56;
}

.term-red::after {
  background: #ff5f56;
  animation: terminalPulse 3s infinite;
}

/* YELLOW */
.term-yellow {
  background: #ffbd2e;
}

.term-yellow::after {
  background: #ffbd2e;
  animation: terminalPulse 4s infinite;
}

/* GREEN */
.term-green {
  background: #27c93f;
}

.term-green::after {
  background: #27c93f;
  animation: terminalPulse 5s infinite;
}

/* Pulse Animation */
@keyframes terminalPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.6);
    opacity: 0.15;
  }

  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}
/* =======================
   BRAND
======================= */
.terminal-brand {
  margin-left: auto;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 3px;

  color: rgba(255, 255, 255, 0.78);

  text-transform: uppercase;

  padding-right: 2px;

  text-shadow: 0 0 10px rgba(138, 43, 226, 0.18);

  animation: terminalGlow 3s ease-in-out infinite;
}

/* MINI LINE */
.terminal-brand::before {
  content: "";

  position: absolute;

  left: -18px;
  top: 50%;

  width: 10px;
  height: 1px;

  background: linear-gradient(90deg, blueviolet, transparent);

  transform: translateY(-50%);
}

/* =======================
   GLOW ANIMATION
======================= */
@keyframes terminalGlow {
  0% {
    opacity: 0.65;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.12);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 14px rgba(138, 43, 226, 0.35),
      0 0 28px rgba(138, 43, 226, 0.12);
  }

  100% {
    opacity: 0.7;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.12);
  }
}
/* Chat Body */
.terminal-chat-body {
  padding: 15px;
  overflow-y: auto;
  font-family: "Consolas", monospace;
  color: #00ffcc;
  font-size: 13px;
  flex: 1;
  min-height: 0;
}

/* Input */
.send-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: none;
  outline: none;
  cursor: pointer;

  background: rgba(138, 43, 226, 0.15);
  border: 1px solid rgba(138, 43, 226, 0.35);

  color: #8a2be2;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: 10px;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover */
.send-btn:hover {
  background: #8a2be2;
  color: white;

  transform: translateY(-2px);

  box-shadow:
    0 0 10px rgba(138, 43, 226, 0.4),
    0 0 20px rgba(138, 43, 226, 0.2);
}

/* Klik */
.send-btn:active {
  transform: scale(0.95);
}

/* Icon */
.send-btn i {
  font-size: 13px;
}
.chat-input-area {
  display: flex;
  align-items: center; /* vertical center */
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-top: 1px solid rgba(138, 43, 226, 0.3);
}

.chat-input-area .prefix {
  color: #8a2be2;
  margin-right: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.chat-input-area input {
  background: transparent;
  border: none;
  color: white;
  outline: none;
  width: 100%;
}
.chat-message {
  margin-bottom: 8px;
  line-height: 1.5;
  word-break: break-word;
}
/* Map full tinggi */
.map-aspect-ratio {
  position: relative;
  width: 100%;
  flex: 1; /* otomatis isi sisa tinggi */
  min-height: 0;
}

.map-aspect-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Glow */
@keyframes dashboardGlow {
  0% {
    background-position: 0% 50%;
    opacity: 0.4;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.8;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.4;
  }
}

/* =========================================================
   DEFAULT DESKTOP
========================================================= */
.dashboard-container {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.75fr)
    minmax(500px, 1.55fr);

  gap: 40px;

  align-items: stretch;
}

/* =========================================================
   DESKTOP ZOOM 110% - 140%
========================================================= */
@media (max-width: 1600px) {
  .dashboard-container {
    grid-template-columns:
      minmax(260px, 0.72fr)
      minmax(420px, 1.45fr);

    gap: 28px;
  }

  .terminal-box,
  .map-box {
    height: 360px;
  }
}

/* =========================================================
   DESKTOP ZOOM 150% - 175%
========================================================= */
@media (max-width: 1350px) {
  .dashboard-container {
    grid-template-columns:
      minmax(240px, 0.68fr)
      minmax(380px, 1.4fr);

    gap: 20px;
  }

  .terminal-box,
  .map-box {
    height: 320px;
  }

  .terminal-chat-body {
    font-size: 11px;
  }
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 760px) {
  .dashboard-container {
    grid-template-columns: 1fr;
  }

  .terminal-box,
  .map-box {
    height: 300px;
  }
}

/* =========================
   MOBILE ONLY
========================= */
@media (max-width: 600px) {
  .live-dashboard-section {
    padding: 80px 20px;
  }

  .dashboard-container {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .terminal-box,
  .map-box {
    height: 260px;
  }

  .terminal-chat-body {
    font-size: 12px;
  }

  .card-header {
    font-size: 11px;
  }

  .chat-input-area .prefix {
    font-size: 10px;
  }
}
/* Smooth fade up */
[data-aos="fade-up"] {
  transform: translateY(50px);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}
/* =====================================================
   ULTRA FUTURISTIC GAMEMODE BACKGROUND
===================================================== */

.gm-section {
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow: hidden;

  padding: 120px 8%;

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.45), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 174, 255, 0.28),
      transparent 35%
    ),
    radial-gradient(
      circle at left center,
      rgba(255, 0, 255, 0.18),
      transparent 30%
    ),
    linear-gradient(180deg, #0a0a14 0%, #11162a 40%, #090912 100%);

  isolation: isolate;
}

/* =====================================================
   GRID
===================================================== */

.gm-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);

  background-size: 70px 70px;

  opacity: 0.45;

  animation: gmGridMove 12s linear infinite;

  mask-image: radial-gradient(circle at center, black 30%, transparent 90%);

  z-index: 1;

  pointer-events: none;
}

/* =====================================================
   GLOBAL LIGHT
===================================================== */

.gm-section::after {
  content: "";

  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at center,
    rgba(138, 43, 226, 0.14),
    transparent 70%
  );

  mix-blend-mode: screen;

  pointer-events: none;

  z-index: 1;
}

/* =====================================================
   BIG CENTER GLOW
===================================================== */

.gm-bg {
  position: absolute;
  inset: 0;

  overflow: hidden;

  z-index: 0;

  pointer-events: none;
}

/* MAIN PURPLE CORE */

.gm-bg::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 1000px;
  height: 1000px;

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.55) 0%,
    rgba(138, 43, 226, 0.35) 20%,
    rgba(0, 174, 255, 0) 30%,
    transparent 72%
  );

  filter: blur(90px);

  animation:
    gmPulse 7s ease-in-out infinite,
    gmFloat 12s ease-in-out infinite;

  opacity: 1;
}

/* SECOND CYAN LIGHT */

.gm-bg::after {
  content: "";

  position: absolute;

  right: -200px;
  top: -80px;

  width: 800px;
  height: 800px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(0, 38, 255, 0.38),
    rgba(0, 110, 255, 0.12),
    transparent 70%
  );

  filter: blur(100px);

  animation: gmFloat2 15s ease-in-out infinite;

  opacity: 0.95;
}

/* =====================================================
   FLOATING LIGHTS
===================================================== */

.gm-light {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  mix-blend-mode: screen;
}

/* PURPLE */

.gm-light.light-1 {
  width: 380px;
  height: 380px;

  left: -80px;
  bottom: -40px;

  background: radial-gradient(
    circle,
    rgba(137, 43, 226, 0.808),
    transparent 70%
  );

  filter: blur(90px);

  animation: gmLightFloat 10s ease-in-out infinite;
}

/* CYAN */

.gm-light.light-2 {
  width: 300px;
  height: 300px;

  right: 10%;
  bottom: 8%;

  background: radial-gradient(circle, rgba(0, 89, 255, 0.45), transparent 70%);

  filter: blur(90px);

  animation: gmLightFloat 8s ease-in-out infinite reverse;
}

/* WHITE */

.gm-light.light-3 {
  width: 220px;
  height: 220px;

  top: 10%;
  left: 20%;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.18),
    transparent 70%
  );

  filter: blur(70px);

  animation: gmLightFloat 12s ease-in-out infinite;
}

/* MAGENTA */

.gm-light.light-4 {
  width: 260px;
  height: 260px;

  top: 50%;
  right: 30%;

  background: radial-gradient(circle, rgba(255, 0, 255, 0.35), transparent 70%);

  filter: blur(80px);

  animation: gmLightFloat2 14s ease-in-out infinite;
}

/* BLUE */

.gm-light.light-5 {
  width: 180px;
  height: 180px;

  top: 20%;
  right: 8%;

  background: radial-gradient(circle, rgba(0, 120, 255, 0.35), transparent 70%);

  filter: blur(70px);

  animation: gmLightFloat3 9s ease-in-out infinite;
}
/* =====================================================
   ANIMATION
===================================================== */

@keyframes gmPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes gmFloat {
  0% {
    transform: translate(-50%, -50%) translateY(0px);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-35px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
}

@keyframes gmFloat2 {
  0% {
    transform: translateY(0px) translateX(0px);
  }

  50% {
    transform: translateY(-45px) translateX(-25px);
  }

  100% {
    transform: translateY(0px) translateX(0px);
  }
}

@keyframes gmLightFloat {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-35px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes gmLightFloat2 {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(35px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes gmLightFloat3 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes gmGridMove {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(70px);
  }
}

/* ==========================
   CONTAINER
========================== */
.gm-container {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 90px;
}

/* ==========================
   LEFT
========================== */
.gm-left {
  width: 40%;

  display: flex;
  justify-content: center;
  align-items: center;

  perspective: 1800px;
}

/* ==========================
   CAROUSEL
========================== */
.gm-carousel {
  position: relative;

  width: 135px;
  height: 185px;

  transform-style: preserve-3d;

  cursor: grab;

  will-change: transform;
}

/* ==========================
   CARD
========================== */
.gm-card {
  position: absolute;
  inset: 0;

  filter: blur(0.3px) brightness(0.55);

  transform-style: preserve-3d;

  transform: rotateY(calc(var(--i) * 36deg)) translateZ(340px);

  overflow: hidden;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(138, 43, 226, 0.15);

  transition:
    transform 0.4s ease,
    opacity 0.4s ease,
    filter 0.4s ease,
    box-shadow 0.4s ease;

  box-shadow:
    0 0 15px rgba(138, 43, 226, 0.18),
    0 0 35px rgba(138, 43, 226, 0.1);

  will-change: transform;
}

/* EXTRA GLOW */
.gm-card::before {
  content: "";

  position: absolute;
  inset: -10px;

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.22),
    transparent 70%
  );

  opacity: 0;

  transition: 0.4s ease;

  z-index: -1;
}

/* HOVER */
.gm-card:hover {
  opacity: 1;
  filter: brightness(1);
  z-index: 5;
  transform: rotateY(calc(var(--i) * 36deg)) translateZ(340px);

  box-shadow:
    0 0 20px rgba(138, 43, 226, 0.3),
    0 0 45px rgba(138, 43, 226, 0.12);
}

.gm-card:hover::before {
  opacity: 1;
}

/* IMAGE */
.gm-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  pointer-events: none;

  user-select: none;
}

/* ==========================
   RIGHT SIDE
========================== */
.gm-right {
  width: 50%;

  position: relative;
  z-index: 2;
}
.gm-right::before {
  content: "";

  position: absolute;

  top: 60px;
  left: 10px;

  width: 1px;
  height: 85%;

  background: linear-gradient(180deg, rgba(138, 43, 226, 0.35), transparent);

  opacity: 0.6;
}
/* ==========================
   TOP LABEL
========================== */
.gm-label {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 18px;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.1),
    rgba(255, 255, 255, 0.02)
  );

  backdrop-filter: blur(12px);

  color: rgba(255, 255, 255, 0.85);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;

  margin-bottom: 38px;

  overflow: hidden;

  box-shadow: 0 0 20px rgba(138, 43, 226, 0.08);

  transition: 0.4s ease;
}

/* GLOW DOT */
.gm-label::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: blueviolet;

  box-shadow:
    0 0 10px blueviolet,
    0 0 20px blueviolet;

  animation: pulseDot 2s infinite;
}

/* SHIMMER */
.gm-label::after {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );

  animation: shimmerFlow 4s linear infinite;
}

/* ==========================
   LIST
========================== */
.gm-list {
  display: grid;
  margin-left: 55px;

  position: relative;

  z-index: 3;

  grid-template-columns: repeat(2, minmax(140px, 1fr));

  gap: 14px;

  width: 100%;

  max-width: 520px;
}

/* ==========================
   GAMEMODE
========================== */
.gm-mode {
  position: relative;

  height: 65px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(138, 43, 226, 0.12);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.05)
  );

  backdrop-filter: blur(14px);

  cursor: pointer;

  overflow: hidden;

  transition: 0.35s ease;

  user-select: none;
}
.gm-mode span {
  position: relative;

  z-index: 2;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;

  color: rgba(255, 255, 255, 0.72);

  transition: 0.3s ease;
}
/* SIDE LINE */
.gm-mode::before {
  content: "";

  position: absolute;
  top: 0;
  left: -130%;

  width: 140%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );

  transform: skewX(-18deg);
  transition: 0.6s ease;
}

.gm-mode:hover::before {
  left: 120%;
}

/* UNDERLINE */
.gm-mode::after {
  content: "";

  position: absolute;
  left: 22px;
  bottom: -8px;

  width: 0%;
  height: 1px;

  background: linear-gradient(90deg, blueviolet, transparent);

  transition: 0.4s ease;
}

/* HOVER */
.gm-mode:hover {
  transform: translateY(-4px);

  border-color: rgba(138, 43, 226, 0.45);

  box-shadow: 0 0 25px rgba(138, 43, 226, 0.14);
}

.gm-mode:hover span {
  color: white;
}

/* ACTIVE */
.gm-mode.active {
  border-color: rgba(138, 43, 226, 0.6);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.18),
    rgba(255, 255, 255, 0.04)
  );

  box-shadow: 0 0 30px rgba(138, 43, 226, 0.18);
}

.gm-mode.active span {
  color: white;

  text-shadow: 0 0 12px rgba(138, 43, 226, 0.4);
}

/* ACTIVE LINE */
.gm-mode.active::before {
  width: 140%;
  left: 0;
  transform: skewX(-18deg);
}

/* ACTIVE UNDERLINE */
.gm-mode.active::after {
  width: 100%;
}

/* ==========================
   HIDE EFFECT
========================== */
.gm-list.expanded .gm-mode:not(.active) {
  opacity: 0;

  transform: translateX(-20px) scale(0.96);

  pointer-events: none;

  height: 0;

  overflow: hidden;

  margin: 0;
}

/* ==========================
   DETAIL BOX
========================== */
.gm-detail {
  position: relative;

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transform: translateY(15px);

  transition: 0.45s ease;

  margin-top: 0;
}

/* ACTIVE */
.gm-detail.active {
  max-height: 240px;

  opacity: 1;

  transform: translateY(0);

  margin-top: 26px;
  margin-left: 90px;

  padding: 26px;

  border: 1px solid rgba(138, 43, 226, 0.12);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.04)
  );

  backdrop-filter: blur(14px);

  box-shadow: 0 0 30px rgba(138, 43, 226, 0.08);
}

/* GLASS PANEL */
.gm-detail.active {
  padding: 28px;

  border: 1px solid rgba(138, 43, 226, 0.14);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.04)
  );

  backdrop-filter: blur(14px);

  box-shadow: 0 0 35px rgba(138, 43, 226, 0.08);
}

/* TOP GLOW */
.gm-detail.active::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(138, 43, 226, 0.8),
    transparent
  );
}

/* TITLE */
.gm-detail h2 {
  position: relative;

  display: inline-block;

  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;

  color: white;

  margin-bottom: 18px;

  text-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
}

/* MINI LINE */
.gm-detail h2::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -8px;

  width: 40px;
  height: 2px;

  background: linear-gradient(90deg, blueviolet, transparent);
}

/* TEXT */
.gm-detail p {
  color: rgba(255, 255, 255, 0.62);

  line-height: 1.9;

  max-width: 520px;

  font-size: 13px;
  font-weight: 400;

  letter-spacing: 0.3px;
}

/* ==========================
   ANIMATIONS
========================== */
@keyframes shimmerFlow {
  0% {
    left: -120%;
  }

  100% {
    left: 120%;
  }
}

@keyframes pulseDot {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.4);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* =========================================================
   LARGE DESKTOP / ZOOM SAFE
========================================================= */
@media (max-width: 1400px) {
  .gm-container {
    gap: 60px;
  }

  .gm-left {
    width: 38%;
  }

  .gm-right {
    width: 52%;
  }

  .gm-carousel {
    width: 115px;
    height: 160px;
  }

  .gm-card {
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(270px);
  }

  .gm-list {
    margin-left: 30px;

    max-width: 460px;

    gap: 12px;
  }

  .gm-mode {
    height: 58px;
  }

  .gm-mode span {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .gm-detail.active {
    margin-left: 45px;

    padding: 22px;
  }

  .gm-detail p {
    font-size: 12px;
    line-height: 1.7;
  }
}

/* =========================================================
   DESKTOP ZOOM 150% - 175%
========================================================= */
@media (max-width: 1180px) {
  .gm-section {
    padding: 100px 5%;
  }

  .gm-container {
    gap: 45px;
  }

  .gm-left {
    width: 36%;
  }

  .gm-right {
    width: 54%;
  }

  .gm-carousel {
    width: 95px;
    height: 135px;
  }

  .gm-card {
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(220px);
  }

  .gm-label {
    font-size: 10px;

    letter-spacing: 3px;

    padding: 8px 14px;

    margin-bottom: 28px;
  }

  .gm-list {
    grid-template-columns: repeat(2, minmax(120px, 1fr));

    gap: 10px;

    margin-left: 20px;

    max-width: 420px;
  }

  .gm-mode {
    height: 52px;
  }

  .gm-mode span {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .gm-detail.active {
    margin-left: 28px;

    margin-top: 18px;

    padding: 20px;
  }

  .gm-detail h2 {
    font-size: 15px;
  }

  .gm-detail p {
    font-size: 11px;

    line-height: 1.6;
  }
}

/* =========================================================
   TABLET + MOBILE LANDSCAPE
   TETAP DESKTOP STYLE
========================================================= */
@media (max-width: 900px) and (orientation: landscape) {
  .gm-section {
    padding: 80px 5%;
  }

  .gm-container {
    flex-direction: row;

    align-items: center;

    gap: 30px;
  }

  .gm-left {
    width: 35%;
  }

  .gm-right {
    width: 55%;
  }

  .gm-carousel {
    width: 80px;
    height: 115px;
  }

  .gm-card {
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(170px);
  }

  .gm-list {
    grid-template-columns: repeat(2, 1fr);

    margin-left: 0;

    gap: 8px;
  }

  .gm-mode {
    height: 45px;
  }

  .gm-mode span {
    font-size: 9px;
  }

  .gm-detail.active {
    margin-left: 0;

    padding: 16px;
  }

  .gm-right::before {
    left: -10px;
  }
}

/* =========================================================
   MOBILE PORTRAIT
   BARU TURUN KE BAWAH
========================================================= */
@media (max-width: 768px) and (orientation: portrait) {
  .gm-section {
    padding: 90px 6%;
  }
  .gm-bg::before {
    width: 600px;
    height: 600px;
  }

  .gm-bg::after {
    width: 420px;
    height: 420px;
  }
  .gm-container {
    flex-direction: column;

    gap: 70px;
  }

  .gm-left,
  .gm-right {
    width: 100%;
  }

  .gm-left {
    min-height: 220px;
  }

  .gm-carousel {
    width: 90px;
    height: 125px;
  }

  .gm-card {
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(170px);
  }

  .gm-right::before {
    display: none;
  }

  .gm-label {
    font-size: 10px;

    letter-spacing: 2px;

    margin-bottom: 22px;
  }

  .gm-list {
    grid-template-columns: 1fr;

    margin-left: 0;

    gap: 10px;

    max-width: 100%;
  }

  .gm-mode {
    height: 52px;
  }

  .gm-mode span {
    font-size: 10px;
  }

  .gm-detail.active {
    margin-left: 0;

    margin-top: 16px;

    padding: 18px;
  }

  .gm-detail h2 {
    font-size: 15px;
  }

  .gm-detail p {
    font-size: 11px;

    line-height: 1.7;
  }
}
/* =====================================================
   FUTURISTIC CINEMATIC SHOWCASE V2
===================================================== */

.cinematic-showcase {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

  /* responsive sizing variables for cards, stack and nav */
  --card-w: 120px;
  --card-h: 170px;
  --stack-height: 240px;
  --nav-width: 320px;
}

/* =====================================================
   BACKGROUND
===================================================== */

.cinematic-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#cinematicBg {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    opacity 0.9s ease,
    transform 1.4s ease;

  animation: cinematicZoom 16s ease-in-out infinite alternate;
}

/* OVERLAY */
.cinematic-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.18) 55%,
    transparent 100%
  );
}

/* =====================================================
   CONTAINER
===================================================== */

.cinematic-container {
  position: relative;
  z-index: 5;

  width: 100%;
  height: 100%;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  padding: 0 7% 60px;
}

/* =====================================================
   LEFT INFO
===================================================== */

.cinematic-info {
  width: 42%;
}

.cinematic-label {
  color: blueviolet;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 5px;

  margin-bottom: 18px;

  opacity: 0.8;
}

.cinematic-info h2 {
  font-size: 74px;
  line-height: 0.95;

  font-weight: 900;

  color: white;

  margin-bottom: 18px;

  text-shadow: 0 0 30px rgba(138, 43, 226, 0.2);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.cinematic-info p:last-child {
  max-width: 520px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 14px;
  line-height: 1.9;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* =====================================================
   RIGHT SIDE
===================================================== */

.cinematic-right {
  width: 560px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* =====================================================
   HORIZONTAL 3D SLIDER
===================================================== */

.cinematic-stack {
  position: relative;

  width: 100%;
  height: var(--stack-height);

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 18px;

  perspective: 1800px;
  overflow: hidden;
}

/* =====================================================
   CARD
===================================================== */

.cinematic-card {
  position: absolute;
  transform-origin: center;

  top: -130%;
  right: 0;

  width: var(--card-w);
  height: var(--card-h);

  overflow: hidden;

  cursor: pointer;

  transform-style: preserve-3d;

  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);

  opacity: 0;
}
/* LEAVING RIGHT: DIBUANG KE KANAN JAUH */
.cinematic-card.leaving-right {
  transform: translateX(200px) translateY(-50%) rotateY(-20deg) scale(0.8); /* Geser ke kanan luar */
  opacity: 0;
  z-index: 0;
}
/* LEAVING */
.cinematic-card.leaving {
  opacity: 0 !important;

  z-index: -5 !important;

  transform: translateX(-760px) translateY(-50%) rotateY(-12deg) scale(0.82);

  filter: blur(6px);
}
/* IMAGE */

.cinematic-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 1s ease;
}

/* =====================================================
   SHADOW
===================================================== */

.card-shadow {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.445) 50%,
    transparent 80%
  );

  z-index: 1;
}

/* =====================================================
   TEXT
===================================================== */

.card-text {
  position: absolute;

  left: 12px;
  bottom: 12px;

  z-index: 2;

  color: white;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 2px;
}

/* =====================================================
   POSITION SYSTEM
   TIDAK MENUMPUK
===================================================== */

/* ACTIVE - PALING KIRI */
.cinematic-card.pos-0 {
  transform: translateX(-580px) translateY(-50%) rotateY(-10deg) scale(0.95);

  opacity: 1;

  z-index: 5;

  box-shadow:
    0 0 30px rgba(138, 43, 226, 0.22),
    0 0 80px rgba(138, 43, 226, 0.1);
}

/* SECOND */

.cinematic-card.pos-1 {
  transform: translateX(-435px) translateY(-50%) rotateY(-9deg) scale(0.95);

  opacity: 0.95;

  z-index: 4;
}

/* THIRD */

.cinematic-card.pos-2 {
  transform: translateX(-290px) translateY(-50%) rotateY(-8deg) scale(0.95);

  opacity: 0.85;

  z-index: 3;
}

/* FOURTH */

.cinematic-card.pos-3 {
  transform: translateX(-145px) translateY(-50%) rotateY(-7deg) scale(0.95);

  opacity: 0.7;

  z-index: 2;
}

/* FIFTH */

.cinematic-card.pos-4 {
  transform: translateX(0px) translateY(-50%) rotateY(-6deg) scale(0.95);

  opacity: 0.55;

  z-index: 1;
}

/* HIDDEN DI KIRI MEMUDAR */

.cinematic-card.hidden {
  transform: translateX(-760px) translateY(-50%) rotateY(-12deg) scale(0.82);

  opacity: 0;

  z-index: -1;

  pointer-events: none;
}

/* =====================================================
   ACTIVE EFFECT
===================================================== */

.cinematic-card.active img {
  transform: scale(1.08);
}

/* =====================================================
   HOVER
===================================================== */

.cinematic-card:hover {
  filter: brightness(1.12);
}

/* =====================================================
   NAVIGATION
===================================================== */

/* =====================================================
   CINEMATIC NAV
===================================================== */

.cinematic-nav {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-top: 28px;
}

/* =====================================================
   BUTTON
===================================================== */

.cinematic-nav button {
  position: relative;

  width: 45px;
  height: 45px;

  border-radius: 50%;

  border: 1px solid rgba(138, 43, 226, 0.16);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(138, 43, 226, 0.12)
  );

  color: white;

  font-size: 13px;

  cursor: pointer;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(14px);

  transition: 0.35s ease;

  box-shadow: 0 0 24px rgba(138, 43, 226, 0.08);
}

/* Glow Sweep */

.cinematic-nav button::before {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );

  transform: translateX(-100%);

  transition: 0.8s;
}

.cinematic-nav button:hover::before {
  transform: translateX(100%);
}

/* Hover */

.cinematic-nav button:hover {
  color: white;

  transform: translateY(-4px) scale(1.06);

  border-color: rgba(138, 43, 226, 0.35);

  box-shadow:
    0 0 30px rgba(138, 43, 226, 0.28),
    0 0 90px rgba(138, 43, 226, 0.12);
}

/* =====================================================
   LINE
===================================================== */

.nav-line {
  position: relative;
  width: var(--nav-width);
  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(138, 43, 226, 0.9),
    rgba(88, 166, 255, 0.4),
    transparent
  );

  overflow: hidden;
}

/* Animated Glow */

.nav-line::before {
  content: "";

  position: absolute;
  top: 2px;
  left: -30%;

  width: 120px;
  height: 3px;

  background: linear-gradient(90deg, transparent, #58a6ff, transparent);

  filter: blur(6px);

  animation: navGlowMove 4s linear infinite;
}

/* =====================================================
   NUMBER
===================================================== */

#slideNumber {
  position: relative;

  min-width: 45px;
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 16px;

  /* FULL BULAT */
  border-radius: 999px;

  border: 1px solid rgba(138, 43, 226, 0.16);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04),
    rgba(138, 43, 226, 0.1)
  );

  backdrop-filter: blur(14px);

  color: rgba(255, 255, 255, 0.88);

  font-size: 15px;
  font-weight: 700;

  letter-spacing: 2px;

  box-shadow: 0 0 20px rgba(138, 43, 226, 0.08);

  overflow: hidden;

  cursor: pointer;

  transition: 0.35s ease;
}

/* LIGHT SWEEP */

#slideNumber::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );

  transform: translateX(-100%);

  transition: 0.8s ease;
}

/* HOVER */

#slideNumber:hover {
  transform: translateY(-3px) scale(1.05);

  border-color: rgba(138, 43, 226, 0.35);

  box-shadow:
    0 0 30px rgba(138, 43, 226, 0.22),
    0 0 80px rgba(138, 43, 226, 0.1);
}

#slideNumber:hover::after {
  transform: translateX(100%);
}
/* =====================================================
   ANIMATION
===================================================== */

@keyframes navGlowMove {
  0% {
    transform: translateX(-120px);
  }

  100% {
    transform: translateX(420px);
  }
}

/* =====================================================
   BG ANIMATION
===================================================== */

@keyframes cinematicZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

/* =====================================================
   RESPONSIVE DESKTOP ZOOM SAFE
   110% - 175%
===================================================== */
@media (max-width: 1400px) {
  .cinematic-showcase {
    --card-w: 100px;
    --card-h: 145px;
    --stack-height: 210px;
    --nav-width: 330px;
  }
  .cinematic-container {
    padding: 0 5% 50px;
  }

  .cinematic-info {
    width: 44%;
  }

  .cinematic-info h2 {
    font-size: 58px;
  }

  .cinematic-info p:last-child {
    font-size: 13px;

    max-width: 420px;
  }

  .cinematic-right {
    width: 470px;
  }

  .cinematic-stack {
    height: 210px;
  }

  .cinematic-card.pos-0 {
    transform: translateX(-480px) translateY(-50%) rotateY(-10deg) scale(0.95);
  }

  .cinematic-card.pos-1 {
    transform: translateX(-360px) translateY(-50%) rotateY(-9deg) scale(0.95);
  }

  .cinematic-card.pos-2 {
    transform: translateX(-240px) translateY(-50%) rotateY(-8deg) scale(0.95);
  }

  .cinematic-card.pos-3 {
    transform: translateX(-120px) translateY(-50%) rotateY(-7deg) scale(0.95);
  }

  .cinematic-card.pos-4 {
    transform: translateX(0) translateY(-50%) rotateY(-6deg) scale(0.95);
  }

  .nav-line {
    width: 330px;
  }
}

/* =====================================================
   DESKTOP ZOOM 150% - 175%
===================================================== */
@media (max-width: 1180px) {
  .cinematic-showcase {
    --card-w: 82px;
    --card-h: 120px;
    --stack-height: 180px;
    --nav-width: 240px;
  }
  .cinematic-container {
    padding: 0 5% 40px;
  }

  .cinematic-info {
    width: 45%;
  }

  .cinematic-info h2 {
    font-size: 46px;

    line-height: 1;
  }

  .cinematic-label {
    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 12px;
  }

  .cinematic-info p:last-child {
    font-size: 11px;

    line-height: 1.7;

    max-width: 360px;
  }

  .cinematic-right {
    width: 390px;
  }

  .cinematic-stack {
    height: 180px;
  }

  .card-text {
    left: 4px;
    right: 4px;
    bottom: 5px;

    font-size: 8px;
    line-height: 1.2;

    letter-spacing: 0.6px;

    white-space: normal;
    word-break: break-word;

    text-align: center;
  }

  .cinematic-card.pos-0 {
    transform: translateX(-360px) translateY(-50%) rotateY(-10deg) scale(0.95);
  }

  .cinematic-card.pos-1 {
    transform: translateX(-270px) translateY(-50%) rotateY(-9deg) scale(0.95);
  }

  .cinematic-card.pos-2 {
    transform: translateX(-180px) translateY(-50%) rotateY(-8deg) scale(0.95);
  }

  .cinematic-card.pos-3 {
    transform: translateX(-90px) translateY(-50%) rotateY(-7deg) scale(0.95);
  }

  .cinematic-card.pos-4 {
    transform: translateX(0) translateY(-50%) rotateY(-6deg) scale(0.95);
  }

  .cinematic-nav button {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  .nav-line {
    width: 240px;
  }
}

/* =====================================================
   TABLET + MOBILE LANDSCAPE
   TETAP SEPERTI DESKTOP
===================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  .cinematic-showcase {
    --card-w: 66px;
    --card-h: 95px;
    --stack-height: 150px;
    --nav-width: 180px;
  }
  .cinematic-container {
    flex-direction: row;

    align-items: flex-end;

    padding: 0 4% 28px;
  }

  .cinematic-info {
    width: 48%;
  }

  .cinematic-right {
    width: 320px;
  }

  .cinematic-info h2 {
    font-size: 34px;
  }

  .cinematic-label {
    font-size: 8px;

    letter-spacing: 2px;
  }

  .cinematic-info p:last-child {
    font-size: 10px;

    line-height: 1.6;
  }

  .cinematic-stack {
    height: 150px;
  }

  .card-text {
    left: 7px;
    bottom: 7px;

    font-size: 6px;
  }

  .cinematic-card.pos-0 {
    transform: translateX(-280px) translateY(-50%) rotateY(-10deg) scale(0.95);
  }

  .cinematic-card.pos-1 {
    transform: translateX(-210px) translateY(-50%) rotateY(-9deg) scale(0.95);
  }

  .cinematic-card.pos-2 {
    transform: translateX(-140px) translateY(-50%) rotateY(-8deg) scale(0.95);
  }

  .cinematic-card.pos-3 {
    transform: translateX(-70px) translateY(-50%) rotateY(-7deg) scale(0.95);
  }

  .cinematic-card.pos-4 {
    transform: translateX(0) translateY(-50%) rotateY(-6deg) scale(0.95);
  }

  .cinematic-nav {
    margin-top: 12px;

    gap: 10px;
  }

  .nav-line {
    width: 180px;
  }
}

/* =====================================================
   MOBILE PORTRAIT - FIXED POSITION
===================================================== */
@media (max-width: 768px) and (orientation: portrait) {
  .cinematic-showcase {
    --card-w: 45px;
    --card-h: 65px;
    --stack-height: 120px;
    --nav-width: 80px;
  }
  .cinematic-showcase {
    min-height: 100vh;

    display: flex;
    align-items: flex-end;
  }

  .cinematic-container {
    flex-direction: row;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;

    gap: 15px;

    padding: 20px 4% 20px;
  }

  /* =========================
      LEFT
  ========================= */

  .cinematic-info {
    width: 55%;

    order: 1;

    text-align: left;

    margin-bottom: 0;
  }

  .cinematic-label {
    font-size: 7px;

    letter-spacing: 2px;

    margin-bottom: 4px;
  }

  .cinematic-info h2 {
    font-size: 22px;

    line-height: 1.1;

    margin-bottom: 6px;
  }

  .cinematic-info p:last-child {
    font-size: 9px;

    line-height: 1.4;

    max-width: 100%;
  }

  /* =========================
      RIGHT
  ========================= */

  .cinematic-right {
    width: 40%;

    order: 2;

    display: flex;
    flex-direction: column;

    align-items: flex-end;
    justify-content: flex-end;
  }

  .card-text {
    left: 4px;
    right: 4px;
    bottom: 5px;

    font-size: 5px;
    line-height: 1.2;

    letter-spacing: 0.6px;

    white-space: normal;
    word-break: break-word;

    text-align: center;
  }

  /* STACK */
  .cinematic-stack {
    width: 100%;

    height: 120px; /* DITINGGIKAN */

    position: relative;

    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    margin-bottom: 6px; /* kasih jarak dikit ke nav */
  }

  /* CARD */
  .cinematic-card {
    position: absolute;

    /* width/height controlled via variables for responsive scaling */

    top: auto;
    bottom: 50px; /* CARD TURUN KE BAWAH */

    border: 1px solid rgba(138, 43, 226, 0.3);

    box-shadow:
      -5px 0 15px rgba(0, 0, 0, 0.5),
      0 0 12px rgba(138, 43, 226, 0.12);
  }

  /* POSITIONS */

  .cinematic-card.pos-0 {
    transform: translateX(-100px) rotateY(-10deg) scale(1);
  }

  .cinematic-card.pos-1 {
    transform: translateX(-75px) rotateY(-9deg) scale(1);
  }

  .cinematic-card.pos-2 {
    transform: translateX(-50px) rotateY(-8deg) scale(1);
  }

  .cinematic-card.pos-3 {
    transform: translateX(-25px) rotateY(-7deg) scale(1);
  }

  .cinematic-card.pos-4 {
    transform: translateX(0) rotateY(-6deg) scale(1);
  }

  /* =========================
      NAV
  ========================= */

  .cinematic-nav {
    width: 100%;

    justify-content: center;

    gap: 10px;

    margin-top: 18px;

    flex-wrap: nowrap;
  }

  /* BUTTON */

  .cinematic-nav button {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    font-size: 7px;

    border-radius: 50%;
  }

  /* LINE */

  .nav-line {
    width: 80px;

    flex-shrink: 0;
  }

  .nav-line::before {
    width: 70px;
  }

  /* NUMBER */

  #slideNumber {
    min-width: 20px;
    height: 20px;

    padding: 0 14px;

    font-size: 7px;

    letter-spacing: 1px;

    flex-shrink: 0;
  }

  #slideNumber::before {
    width: 6px;
    height: 6px;

    margin-right: 8px;
  }
}
/* =====================================================
   VIDEO TRAILER
===================================================== */

.nx-hero-section {
  position: relative;

  width: 100%;
  height: 500px;

  overflow: hidden;

  display: flex;
  align-items: center;

  background: linear-gradient(180deg, #04070f 0%, #050912 100%);

  isolation: isolate;
}

/* =====================================================
   VIDEO
===================================================== */

.nx-hero-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: 1;

  opacity: 0.78;

  transform: scale(1.08) translateZ(0);

  will-change: auto;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  pointer-events: none;
}

/* =====================================================
   OVERLAY
===================================================== */

.nx-dark-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.98) 0%,
    rgba(0, 0, 0, 0.72) 34%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
}

/* =====================================================
   SHAPE
===================================================== */

.nx-blue-shape {
  position: absolute;

  top: 0;
  left: 0;

  width: 78%;
  height: 100%;

  z-index: 3;

  opacity: 0.96;

  background: linear-gradient(
    90deg,
    #0047ff 0%,
    #002cb7 32%,
    #00112f 62%,
    #000000 100%
  );

  clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%);

  box-shadow: 0 0 80px rgba(0, 89, 255, 0.35);
}

/* LIGHT */

.nx-blue-shape::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 35%;

  transform: translate(-50%, -50%);

  width: 520px;
  height: 520px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(0, 140, 255, 0.45), transparent 70%);

  filter: blur(90px);
}

/* =====================================================
   GRID
===================================================== */

.nx-hero-section::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 4;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 55px 55px;

  opacity: 0.35;
}

/* =====================================================
   GLOW
===================================================== */

.nx-glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(120px);

  pointer-events: none;

  z-index: 4;
}

.nx-glow-1 {
  width: 320px;
  height: 320px;

  top: -80px;
  left: -50px;

  background: rgba(0, 89, 255, 0.34);
}

.nx-glow-2 {
  width: 240px;
  height: 240px;

  bottom: -60px;
  left: 30%;

  background: rgba(0, 140, 255, 0.16);
}

/* =====================================================
   CONTENT
===================================================== */

.nx-hero-content {
  position: relative;

  z-index: 10;

  margin-left: 8%;

  max-width: 420px;

  color: white;
}

/* =====================================================
   LABEL
===================================================== */

.nx-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  position: relative;

  padding: 8px 16px;

  border: 1px solid rgba(168, 85, 247, 0.18);

  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.12),
    rgba(88, 166, 255, 0.08)
  );

  backdrop-filter: blur(12px);

  color: #d8b4fe;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 4px;

  text-transform: uppercase;

  margin-bottom: 18px;

  box-shadow: 0 0 30px rgba(168, 85, 247, 0.12);
}

/* Glow Line */

.nx-label::before {
  content: "";

  width: 24px;
  height: 1px;

  background: linear-gradient(90deg, transparent, #c084fc, transparent);
}

/* =====================================================
   TITLE
===================================================== */

.nx-title {
  font-size: 42px;
  font-weight: 900;

  line-height: 1.02;

  margin-bottom: 18px;

  letter-spacing: -1.5px;

  text-transform: uppercase;

  color: white;
}

/* Gradient Text */

.nx-title span {
  display: block;

  background: linear-gradient(90deg, #c084fc 0%, #7c3aed 35%, black 100%);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 35px rgba(168, 85, 247, 0.18),
    0 0 80px rgba(88, 166, 255, 0.12);
}

/* =====================================================
   DESCRIPTION
===================================================== */

.nx-description {
  color: rgba(255, 255, 255, 0.92);

  font-size: 13px;

  line-height: 1.9;

  max-width: 500px;

  margin-bottom: 32px;

  text-shadow: 0 0 12px rgba(255, 255, 255, 0.04);
}

/* =====================================================
   WATCH BUTTON
===================================================== */

.nx-watch-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  height: 52px;

  padding: 0 28px;

  overflow: hidden;

  cursor: pointer;

  border: 1px solid rgba(0, 132, 255, 0.24);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(0, 132, 255, 0.18)
  );

  color: white;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 2px;

  transition: 0.45s ease;

  backdrop-filter: blur(18px);

  box-shadow: 0 0 30px rgba(0, 132, 255, 0.14);
}

.nx-watch-btn::before {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );

  transform: translateX(-100%);

  transition: 0.9s;
}

.nx-watch-btn:hover::before {
  transform: translateX(100%);
}

.nx-watch-btn:hover {
  transform: translateY(-5px);

  border-color: rgba(0, 140, 255, 0.45);

  box-shadow:
    0 0 40px rgba(0, 132, 255, 0.35),
    0 0 120px rgba(0, 132, 255, 0.12);
}

/* =====================================================
   VIDEO CONTROL
===================================================== */

.nx-video-btn {
  position: absolute;

  top: 22px;
  right: 22px;

  z-index: 15;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.08);

  color: white;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(16px);

  transition: 0.3s ease;
}

.nx-video-btn:hover {
  transform: scale(1.08);

  background: rgba(255, 255, 255, 0.16);

  box-shadow: 0 0 30px rgba(0, 132, 255, 0.35);
}

/* =====================================================
   MODAL
===================================================== */

.nx-trailer-modal {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(
    circle at center,
    rgba(0, 89, 255, 0.12),
    rgba(0, 0, 0, 0.96)
  );

  backdrop-filter: blur(18px);

  z-index: 99999;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.nx-trailer-modal.active {
  opacity: 1;
  visibility: visible;
}
#nxModalVideo {
  animation: cinematicOpen 0.5s ease;
}

@keyframes cinematicOpen {
  from {
    transform: scale(0.92);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =====================================================
   FULLSCREEN VIDEO
===================================================== */

.nx-trailer-modal video {
  width: auto;
  height: auto;

  max-width: 100vw;
  max-height: 100vh;

  object-fit: contain;

  border-radius: 0;

  background: #000;

  box-shadow: 0 0 80px rgba(0, 132, 255, 0.18);
}

/* CLOSE */

.nx-close-modal {
  position: absolute;

  top: 24px;
  right: 24px;

  z-index: 10;

  width: 48px;
  height: 48px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.08);

  color: white;

  font-size: 18px;

  cursor: pointer;

  backdrop-filter: blur(14px);

  transition: 0.3s ease;
}

.nx-close-modal:hover {
  transform: rotate(90deg);

  box-shadow: 0 0 30px rgba(0, 132, 255, 0.35);
}

/* =====================================================
   TABLET & MOBILE
===================================================== */

@media (max-width: 768px) {
  .nx-hero-section {
    height: 300px;
  }

  /* SHAPE */

  .nx-blue-shape {
    width: 80%;
  }

  .nx-blue-shape::before {
    width: 420px;
    height: 180px;

    filter: blur(60px);
  }

  /* CONTENT */

  .nx-hero-content {
    margin-left: 18px;

    max-width: 210px;
  }

  /* LABEL */

  .nx-label {
    padding: 5px 10px;

    font-size: 6px;

    letter-spacing: 1.5px;

    margin-bottom: 8px;
  }

  .nx-label::before {
    width: 12px;
  }

  /* TITLE */

  .nx-title {
    font-size: 18px;

    line-height: 1.1;

    margin-bottom: 8px;
  }

  /* DESCRIPTION */

  .nx-description {
    font-size: 8px;

    line-height: 1.6;

    margin-bottom: 12px;
  }

  /* BUTTON */

  .nx-watch-btn {
    height: 32px;

    padding: 0 12px;

    gap: 6px;

    font-size: 7px;

    letter-spacing: 1px;
  }

  /* VIDEO CONTROL */

  .nx-video-btn {
    width: 32px;
    height: 32px;

    top: 10px;
    right: 10px;

    font-size: 9px;
  }

  /* GLOW */

  .nx-glow-1 {
    width: 120px;
    height: 120px;
  }

  .nx-glow-2 {
    width: 90px;
    height: 90px;
  }

  /* MODAL */

  .nx-close-modal {
    width: 36px;
    height: 36px;

    top: 10px;
    right: 10px;

    font-size: 12px;
  }
}

/* =====================================================
   SMALL PHONE
===================================================== */

@media (max-width: 480px) {
  .nx-hero-section {
    height: 260px;
  }

  .nx-blue-shape {
    width: 85%;
  }

  .nx-hero-content {
    margin-left: 14px;

    max-width: 180px;
  }

  .nx-title {
    font-size: 15px;
  }

  .nx-description {
    font-size: 7px;
  }

  .nx-watch-btn {
    height: 28px;

    padding: 0 10px;

    font-size: 6px;
  }

  .nx-video-btn {
    width: 28px;
    height: 28px;

    font-size: 8px;
  }
}

/* =========================================================
   ABOUT NETWORK SECTION
========================================================= */

.about-network-section {
  position: relative;
  padding: 140px 8%;
  overflow: hidden;
}

/* GLOW */
.about-network-glow {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 600px;
  height: 600px;

  transform: translate(-50%, -50%);

  background: rgba(138, 43, 226, 0.12);

  filter: blur(140px);

  pointer-events: none;
}

/* CONTAINER */
.about-network-container {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 80px;
}

/* LEFT */
.about-network-left {
  width: 55%;
}

.about-label {
  color: blueviolet;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 4px;

  margin-bottom: 20px;
}

.about-network-left h2 {
  font-size: 55px;
  line-height: 1;

  font-weight: 900;

  color: white;

  margin-bottom: 28px;

  text-shadow: 0 0 30px rgba(138, 43, 226, 0.2);

  max-width: 700px;

  text-wrap: balance;
}

.about-description {
  max-width: 620px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 14px;
  line-height: 2;
}

/* FEATURES */
.about-features {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 35px;
}

.about-features span {
  padding: 10px 16px;

  border: 1px solid rgba(138, 43, 226, 0.2);

  background: rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(10px);

  color: rgba(255, 255, 255, 0.8);

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 1px;

  transition: 0.3s ease;
}

.about-features span:hover {
  transform: translateY(-4px);

  border-color: #8a2be2;

  box-shadow: 0 0 20px rgba(138, 43, 226, 0.15);

  color: white;
}

/* RIGHT */
.about-network-right {
  width: 40%;

  display: flex;
  justify-content: center;
}
.cursor-glow {
  position: absolute;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.24) 0%,
    rgba(138, 43, 226, 0.1) 35%,
    transparent 72%
  );

  transform: translate(-50%, -50%);

  pointer-events: none;

  opacity: 0;

  transition:
    opacity 0.25s ease,
    left 0.05s linear,
    top 0.05s linear;

  filter: blur(30px);

  z-index: 0; /* penting */

  mix-blend-mode: screen;
}
/* CARD */
.about-card {
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 420px;
  z-index: 2;

  padding: 40px;

  border: 1px solid rgba(138, 43, 226, 0.16);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.05)
  );

  backdrop-filter: blur(14px);

  overflow: hidden;

  box-shadow:
    0 0 30px rgba(138, 43, 226, 0.08),
    0 0 80px rgba(138, 43, 226, 0.05);
}

/* TOP LINE */
.about-card-line {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(90deg, transparent, blueviolet, transparent);
}

.about-card-top {
  display: inline-block;

  color: rgba(255, 255, 255, 0.5);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 3px;

  margin-bottom: 20px;
}

.about-card h3 {
  color: white;

  font-size: 42px;
  line-height: 1;

  margin-bottom: 20px;

  font-weight: 900;
}

.about-card p {
  color: rgba(255, 255, 255, 0.65);

  line-height: 1.9;

  font-size: 13px;
}

/* GLOW */
.about-card-glow {
  position: absolute;
  right: -60px;
  bottom: -60px;

  width: 180px;
  height: 180px;

  background: rgba(138, 43, 226, 0.18);

  filter: blur(70px);
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* ZOOM / TABLET */
@media (max-width: 1200px) {
  .about-network-left h2 {
    font-size: 42px;
  }

  .about-card h3 {
    font-size: 32px;
  }

  .about-description {
    font-size: 13px;
  }
}

/* MOBILE PORTRAIT */
@media (max-width: 768px) and (orientation: portrait) {
  .about-network-section {
    padding: 80px 5%;
  }

  .about-network-glow {
    width: 320px;
    height: 320px;
    filter: blur(100px);
  }

  .about-network-container {
    flex-direction: column;
    gap: 30px;
  }

  .about-network-left,
  .about-network-right {
    width: 100%;
  }

  .about-label {
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 12px;
  }

  .about-network-left h2 {
    font-size: 28px;
    line-height: 1.05;
    margin-bottom: 16px;
  }

  .about-description {
    font-size: 12px;
    line-height: 1.8;
  }

  .about-features {
    gap: 8px;
    margin-top: 24px;
  }

  .about-features span {
    padding: 8px 12px;
    font-size: 9px;
  }

  .about-card {
    max-width: 100%;
    padding: 24px;
  }

  .about-card-top {
    font-size: 9px;
  }

  .about-card h3 {
    font-size: 24px;
  }

  .about-card p {
    font-size: 11px;
    line-height: 1.8;
  }

  .about-card-glow {
    width: 120px;
    height: 120px;
  }
}

/* MOBILE LANDSCAPE */
@media (max-width: 950px) and (orientation: landscape) {
  .about-network-section {
    padding: 90px 6%;
  }

  .about-network-container {
    flex-direction: row;
    gap: 40px;
  }

  .about-network-left {
    width: 58%;
  }

  .about-network-right {
    width: 42%;
  }

  .about-network-left h2 {
    font-size: 36px;
  }

  .about-description {
    font-size: 12px;
  }

  .about-card {
    padding: 28px;
  }

  .about-card h3 {
    font-size: 28px;
  }
}

/* =====================================================
   STORE PREVIEW & MARKETPLACE
===================================================== */

.store-preview-section {
  position: relative;
  padding: 140px 8%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  backdrop-filter: blur(18px);
  box-shadow: 0 0 60px rgba(138, 43, 226, 0.12);
}

/* =====================================================
   HEADER
===================================================== */

.store-header {
  position: relative;
  z-index: 2;

  text-align: center;

  margin-bottom: 70px;
}

.store-label {
  display: inline-block;

  color: #c084fc;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 5px;

  margin-bottom: 18px;
}

.store-header h2 {
  color: white;

  font-size: 58px;
  font-weight: 900;

  line-height: 1;

  margin-bottom: 18px;
}

.store-header h2 span {
  background: linear-gradient(90deg, blueviolet, violet);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.store-header p {
  max-width: 700px;

  margin: auto;

  color: rgba(255, 255, 255, 0.65);

  font-size: 14px;

  line-height: 2;
}

.store-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;

  overflow: hidden;
}

.store-category-card {
  position: relative;

  overflow: hidden;

  min-height: 360px;

  border: 1px solid rgba(138, 43, 226, 0.15);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.05)
  );

  backdrop-filter: blur(14px);

  text-decoration: none;

  transition: 0.4s ease;
}

.store-category-card:hover {
  transform: translateY(-8px);

  border-color: rgba(138, 43, 226, 0.4);

  box-shadow: 0 0 40px rgba(138, 43, 226, 0.18);
}

.card-image {
  height: 220px;

  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: 0.7s ease;
}

.store-category-card:hover img {
  transform: scale(1.08);
}

.card-content {
  padding: 28px;
}

.card-tag {
  display: inline-flex;

  padding: 8px 14px;

  background: rgba(138, 43, 226, 0.15);

  color: #d8b4fe;

  font-size: 10px;

  letter-spacing: 2px;

  margin-bottom: 16px;
}

.marketplace {
  background: rgba(88, 166, 255, 0.12);

  color: #58a6ff;
}

.card-content h3 {
  color: var(--primary);
  font-family: "Archivo Black", sans-serif;

  font-size: 28px;

  margin-bottom: 12px;
}

.card-content p {
  color: rgba(255, 255, 255, 0.65);

  line-height: 1.8;

  font-size: 13px;
}

/* glow cursor */

.rule-card-glow {
  position: absolute;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.22),
    transparent 70%
  );

  transform: translate(-50%, -50%);

  pointer-events: none;

  opacity: 0;

  transition: 0.25s;

  z-index: 0;
}

.store-category-card:hover .rule-card-glow {
  opacity: 1;
}
/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) {
  .store-preview-section {
    padding: 100px 6%;
  }

  .store-header {
    margin-bottom: 50px;
  }

  .store-header h2 {
    font-size: 46px;
  }

  .store-header p {
    max-width: 620px;
    font-size: 13px;
  }

  .store-category-grid {
    gap: 18px;
  }

  .store-category-card {
    min-height: 320px;
  }

  .card-image {
    height: 190px;
  }

  .card-content {
    padding: 22px;
  }

  .card-content h3 {
    font-size: 24px;
  }

  .card-content p {
    font-size: 12px;
  }
}

/* =====================================================
   MOBILE + TABLET
   DESKTOP STYLE VERSION
===================================================== */

@media (max-width: 768px) {
  .store-preview-section {
    padding: 80px 5%;
  }

  .store-header {
    margin-bottom: 45px;
  }

  .store-label {
    font-size: 8px;
    letter-spacing: 3px;
  }

  .store-header h2 {
    font-size: 30px;
  }

  .store-header p {
    max-width: 500px;

    font-size: 11px;

    line-height: 1.8;
  }

  /* TETAP 2 KOLOM */

  .store-category-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 10px;
  }

  .store-category-card {
    min-height: 210px;
  }

  .card-image {
    height: 110px;
  }

  .card-content {
    padding: 12px;
  }

  .card-tag {
    padding: 4px 8px;

    font-size: 7px;

    letter-spacing: 1px;

    margin-bottom: 8px;
  }

  .card-content h3 {
    font-size: 15px;

    margin-bottom: 6px;
  }

  .card-content p {
    font-size: 9px;

    line-height: 1.6;
  }

  .rule-card-glow {
    width: 120px;
    height: 120px;
  }
}

/* =====================================================
   NETWORK RULES SECTION
===================================================== */

.network-rules-section {
  position: relative;

  width: 100%;

  padding: 140px 8%;

  overflow: hidden;

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.08), transparent 45%),
    rgba(0, 0, 0, 0.35);
}

/* =====================================================
   BG GLOW
===================================================== */

.rules-bg-glow {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 700px;
  height: 700px;

  transform: translate(-50%, -50%);

  background: rgba(138, 43, 226, 0.12);

  filter: blur(140px);

  pointer-events: none;
}

/* =====================================================
   CONTAINER
===================================================== */

.rules-container {
  position: relative;
  z-index: 2;
}

/* =====================================================
   TOP
===================================================== */

.rules-top {
  text-align: center;

  margin-bottom: 80px;
}

.rules-label {
  color: blueviolet;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 5px;

  margin-bottom: 16px;
}

.rules-top h2 {
  color: white;

  font-size: 62px;
  font-weight: 900;

  line-height: 1;

  margin-bottom: 24px;
}

.rules-top h2 span {
  color: blueviolet;

  text-shadow:
    0 0 20px rgba(138, 43, 226, 0.5),
    0 0 40px rgba(138, 43, 226, 0.2);
}

.rules-desc {
  max-width: 760px;

  margin: auto;

  color: rgba(255, 255, 255, 0.62);

  font-size: 15px;
  line-height: 1.9;
}

/* =====================================================
   GRID
===================================================== */

.rules-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  align-items: stretch;
}

/* =====================================================
   CARD
===================================================== */

.rule-card {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  padding: 22px;

  min-height: 185px;

  border: 1px solid rgba(138, 43, 226, 0.14);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.025),
    rgba(138, 43, 226, 0.045)
  );

  backdrop-filter: blur(14px);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* TOP LINE */

.rule-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(90deg, transparent, blueviolet, transparent);

  opacity: 0.7;
}

/* HOVER */

.rule-card:hover {
  transform: translateY(-5px);

  border-color: rgba(138, 43, 226, 0.38);

  box-shadow:
    0 0 20px rgba(138, 43, 226, 0.12),
    0 0 50px rgba(138, 43, 226, 0.05);
}

/* =====================================================
   CURSOR GLOW
===================================================== */

.rule-card-glow {
  position: absolute;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.18) 0%,
    rgba(138, 43, 226, 0.06) 35%,
    transparent 70%
  );

  transform: translate(-50%, -50%);

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.25s ease;

  z-index: 0;
}

.rule-card:hover .rule-card-glow {
  opacity: 1;
}

/* CONTENT ABOVE GLOW */

.rule-card > *:not(.rule-card-glow) {
  position: relative;
  z-index: 2;
}

/* =====================================================
   ICON
===================================================== */

.rule-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;

  border-radius: 12px;

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.18),
    rgba(138, 43, 226, 0.04)
  );

  border: 1px solid rgba(138, 43, 226, 0.18);

  color: blueviolet;

  font-size: 14px;

  box-shadow: 0 0 14px rgba(138, 43, 226, 0.12);
}

/* =====================================================
   TEXT
===================================================== */

.rule-card h3 {
  color: white;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 1.5px;

  margin-bottom: 10px;

  line-height: 1.3;
}

.rule-card p {
  color: rgba(255, 255, 255, 0.6);

  font-size: 11px;

  line-height: 1.7;
}

/* =====================================================
   RESPONSIVE
===================================================== */

/* ZOOM DESKTOP */

@media (max-width: 1400px) {
  .rules-title {
    font-size: 54px;
  }

  .rule-card {
    min-height: 175px;

    padding: 20px;
  }
}

/* SMALL DESKTOP */

@media (max-width: 1200px) {
  .rules-grid {
    gap: 14px;
  }

  .rule-card {
    min-height: 165px;

    padding: 18px;
  }

  .rule-card h3 {
    font-size: 11px;
  }

  .rule-card p {
    font-size: 10px;
  }
}

/* TABLET */

@media (max-width: 1000px) {
  .rules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rules-title {
    font-size: 46px;
  }
}

/* =====================================================
   RULES MOBILE PORTRAIT
===================================================== */

@media (max-width: 768px) and (orientation: portrait) {
  .network-rules-section {
    padding: 80px 5%;
  }

  .rules-bg-glow {
    width: 350px;
    height: 350px;
    filter: blur(100px);
  }

  .rules-top {
    margin-bottom: 35px;
  }

  .rules-label {
    font-size: 9px;
    letter-spacing: 3px;
  }

  .rules-top h2 {
    font-size: 28px;
    line-height: 1.05;
    margin-bottom: 14px;
  }

  .rules-desc {
    font-size: 12px;
    line-height: 1.8;
  }

  .rules-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rule-card {
    min-height: auto;
    padding: 18px;
  }

  .rule-icon {
    width: 38px;
    height: 38px;
    font-size: 12px;
    margin-bottom: 12px;
  }

  .rule-card h3 {
    font-size: 11px;
  }

  .rule-card p {
    font-size: 10px;
    line-height: 1.7;
  }
}

/* =====================================================
   RULES MOBILE LANDSCAPE
===================================================== */

@media (max-width: 950px) and (orientation: landscape) {
  .network-rules-section {
    padding: 90px 6%;
  }

  .rules-top h2 {
    font-size: 40px;
  }

  .rules-desc {
    font-size: 13px;
  }

  .rules-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .rule-card {
    padding: 16px;
    min-height: 150px;
  }

  .rule-icon {
    width: 36px;
    height: 36px;
  }

  .rule-card h3 {
    font-size: 10px;
  }

  .rule-card p {
    font-size: 9px;
  }
}
/* =====================================================
   HOSTING INTRO SECTION
   UPGRADED FUTURISTIC VERSION
===================================================== */

.hosting-intro-section {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 220px 8%;

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);
}

/* =====================================================
   CYBER GRID
===================================================== */

.hosting-grid {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  background-size: 70px 70px;

  opacity: 0.3;

  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );

  z-index: 1;
}

/* =====================================================
   ANIMATED LIGHTS
===================================================== */

.hosting-intro-section::before,
.hosting-intro-section::after {
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  border-radius: 50%;

  filter: blur(120px);

  opacity: 0.18;

  animation: hostingGlowMove 12s linear infinite;
}

.hosting-intro-section::before {
  top: -180px;
  left: -180px;

  background: blueviolet;
}

.hosting-intro-section::after {
  bottom: -200px;
  right: -160px;

  background: #008cff;

  animation-delay: 5s;
}

/* =====================================================
   CONTAINER
===================================================== */

.hosting-intro-container {
  position: relative;

  z-index: 3;

  max-width: 1250px;

  margin: auto;

  text-align: center;
}

/* =====================================================
   LABEL
===================================================== */

.hosting-intro-label {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 14px;

  padding: 12px 22px;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);

  backdrop-filter: blur(12px);

  color: rgba(255, 255, 255, 0.82);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 5px;

  text-transform: uppercase;

  overflow: hidden;

  box-shadow: 0 0 20px rgba(138, 43, 226, 0.08);
}

/* SHIMMER */

.hosting-intro-label::after {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );

  animation: hostingShimmer 5s linear infinite;
}

/* DOT */

.hosting-intro-label::before {
  content: "";

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: blueviolet;

  box-shadow:
    0 0 12px blueviolet,
    0 0 30px blueviolet;
}

/* =====================================================
   TITLE
===================================================== */

.hosting-intro-title {
  margin-top: 40px;

  font-size: 92px;
  line-height: 0.9;

  font-weight: 900;

  color: white;

  text-transform: uppercase;

  letter-spacing: -3px;

  text-shadow:
    0 0 25px rgba(138, 43, 226, 0.22),
    0 0 70px rgba(138, 43, 226, 0.12);
}

/* BLUE TEXT */

.hosting-intro-title span {
  background: linear-gradient(90deg, #ffffff, #9c6bff, #4cc9ff);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================================================
   DESCRIPTION
===================================================== */

.hosting-intro-desc {
  max-width: 860px;

  margin: 34px auto 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 16px;

  line-height: 2;

  text-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

/* =====================================================
   FEATURES WRAP
===================================================== */

.hosting-intro-features {
  margin-top: 80px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 16px;
}

/* =====================================================
   FEATURE CARD
===================================================== */

.hosting-feature {
  position: relative;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 15px 24px;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04),
    rgba(138, 43, 226, 0.08)
  );

  backdrop-filter: blur(14px);

  color: rgba(255, 255, 255, 0.85);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1px;

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* GLOW BG */

.hosting-feature::before {
  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(
    circle at top left,
    rgba(138, 43, 226, 0.18),
    transparent 60%
  );

  opacity: 0;

  transition: 0.35s ease;
}

/* DOT */

.hosting-feature span {
  position: relative;
  z-index: 2;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #9c6bff;

  box-shadow:
    0 0 12px #9c6bff,
    0 0 24px #9c6bff;
}

/* TEXT */

.hosting-feature {
  position: relative;
  z-index: 2;
}

/* HOVER */

.hosting-feature:hover {
  transform: translateY(-5px);

  border-color: rgba(138, 43, 226, 0.45);

  box-shadow:
    0 0 20px rgba(138, 43, 226, 0.18),
    0 0 45px rgba(138, 43, 226, 0.12);
}

.hosting-feature:hover::before {
  opacity: 1;
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes hostingGlowMove {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(40px, -20px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes hostingShimmer {
  0% {
    left: -120%;
  }

  100% {
    left: 120%;
  }
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {
  .hosting-intro-section {
    padding: 170px 6%;
  }

  .hosting-intro-title {
    font-size: 72px;
  }

  .hosting-intro-desc {
    max-width: 720px;
    font-size: 14px;
  }

  .hosting-intro-features {
    margin-top: 60px;
    gap: 12px;
  }

  .hosting-feature {
    padding: 13px 20px;
    font-size: 11px;
  }
}

/* =====================================================
   MOBILE
   TETAP SEPERTI DESKTOP
===================================================== */

@media (max-width: 768px) {
  .hosting-intro-section {
    padding: 120px 5%;
  }

  /* Glow */

  .hosting-intro-section::before,
  .hosting-intro-section::after {
    width: 380px;
    height: 380px;

    filter: blur(90px);
  }

  .hosting-grid {
    background-size: 40px 40px;
  }

  /* Label */

  .hosting-intro-label {
    padding: 8px 14px;

    font-size: 8px;

    gap: 8px;

    letter-spacing: 2px;
  }

  .hosting-intro-label::before {
    width: 6px;
    height: 6px;
  }

  /* Title */

  .hosting-intro-title {
    margin-top: 22px;

    font-size: 42px;

    letter-spacing: -1px;
  }

  /* Description */

  .hosting-intro-desc {
    max-width: 520px;

    margin-top: 20px;

    font-size: 11px;

    line-height: 1.8;
  }

  /* Features */

  .hosting-intro-features {
    margin-top: 35px;

    gap: 8px;
  }

  .hosting-feature {
    padding: 10px 14px;

    gap: 8px;

    font-size: 9px;
  }

  .hosting-feature span {
    width: 5px;
    height: 5px;
  }
}

/* =====================================================
   SMALL PHONE
===================================================== */

@media (max-width: 480px) {
  .hosting-intro-section {
    padding: 100px 4%;
  }

  .hosting-intro-title {
    font-size: 34px;
  }

  .hosting-intro-desc {
    font-size: 10px;
  }

  .hosting-feature {
    padding: 8px 12px;

    font-size: 8px;
  }
}
/* =====================================================
   INFRASTRUCTURE SECTION
===================================================== */

.infra-section {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 180px 8%;

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.14), transparent 35%),
    linear-gradient(180deg, #090011 0%, #050009 100%);
}

/* =====================================================
   BG GLOW
===================================================== */

.infra-bg {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 700px;
  height: 700px;

  transform: translate(-50%, -50%);

  background: rgba(138, 43, 226, 0.12);

  filter: blur(140px);

  opacity: 0.7;

  pointer-events: none;
}

/* =====================================================
   GRID BG
===================================================== */

.infra-grid {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  background-size: 60px 60px;

  opacity: 0.25;

  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* =====================================================
   CONTAINER
===================================================== */

.infra-container {
  position: relative;

  z-index: 3;

  max-width: 1400px;

  margin: auto;
}

/* =====================================================
   TOP
===================================================== */

.infra-top {
  text-align: center;

  margin-bottom: 90px;
}

/* LABEL */

.infra-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 12px 20px;

  border: 1px solid rgba(138, 43, 226, 0.15);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.08),
    rgba(255, 255, 255, 0.03)
  );

  backdrop-filter: blur(12px);

  color: rgba(255, 255, 255, 0.78);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 4px;

  margin-bottom: 30px;
}

/* DOT */

.infra-label::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: blueviolet;

  box-shadow:
    0 0 12px blueviolet,
    0 0 24px blueviolet;
}

/* TITLE */

.infra-top h2 {
  font-size: 72px;
  line-height: 0.95;

  color: white;

  font-weight: 900;

  margin-bottom: 26px;

  text-shadow: 0 0 35px rgba(138, 43, 226, 0.18);
}

/* DESC */

.infra-desc {
  max-width: 760px;

  margin: auto;

  color: rgba(255, 255, 255, 0.65);

  font-size: 15px;

  line-height: 2;
}

/* =====================================================
   CARD GRID
===================================================== */

.infra-grid-cards {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;
}

/* =====================================================
   CARD
===================================================== */

.infra-card {
  position: relative;
  isolation: isolate;

  padding: 28px;

  border: 1px solid rgba(138, 43, 226, 0.14);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.06)
  );

  backdrop-filter: blur(14px);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
/* =====================================================
   CURSOR GLOW
===================================================== */

.infra-card::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  left: var(--x, 50%);
  top: var(--y, 50%);

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.22) 0%,
    rgba(138, 43, 226, 0.1) 35%,
    transparent 72%
  );

  opacity: 0;

  transition: opacity 0.35s ease;

  pointer-events: none;

  z-index: -1;

  filter: blur(20px);
}

/* HOVER */

.infra-card:hover::before {
  opacity: 1;
}
/* TOP LINE */

.infra-line {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(90deg, transparent, blueviolet, transparent);
}

/* ICON */

.infra-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.12),
    rgba(255, 255, 255, 0.03)
  );

  color: #b26cff;

  font-size: 18px;

  margin-bottom: 24px;

  box-shadow: 0 0 18px rgba(138, 43, 226, 0.12);
}

/* TITLE */

.infra-card h3 {
  color: white;

  font-size: 16px;
  font-weight: 800;

  margin-bottom: 12px;
}

/* TEXT */

.infra-card p {
  color: rgba(255, 255, 255, 0.62);

  font-size: 13px;

  line-height: 1.8;
}

/* HOVER */

.infra-card:hover {
  transform: translateY(-6px);

  border-color: rgba(138, 43, 226, 0.35);

  box-shadow:
    0 0 25px rgba(138, 43, 226, 0.12),
    0 0 60px rgba(138, 43, 226, 0.06);
}

/* =====================================================
   RESPONSIVE
===================================================== */

/* DESKTOP ZOOM */

@media (max-width: 1400px) {
  .infra-grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .infra-top h2 {
    font-size: 60px;
  }
}

/* TABLET */

@media (max-width: 1000px) {
  .infra-section {
    padding: 150px 7%;
    overflow: hidden;
  }

  .infra-grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .infra-top h2 {
    font-size: 48px;
  }
}

/* MOBILE PORTRAIT */

@media (max-width: 768px) and (orientation: portrait) {
  .infra-section {
    padding: 120px 6%;
    overflow: hidden;
  }

  .infra-top {
    margin-bottom: 50px;
  }

  .infra-top h2 {
    font-size: 34px;

    line-height: 1.05;
  }

  .infra-desc {
    font-size: 12px;

    line-height: 1.9;
  }

  .infra-grid-cards {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .infra-card {
    padding: 22px;
  }

  .infra-icon {
    width: 44px;
    height: 44px;

    font-size: 15px;
  }

  .infra-card h3 {
    font-size: 14px;
  }

  .infra-card p {
    font-size: 11px;
  }
}

/* MOBILE LANDSCAPE */

@media (max-width: 900px) and (orientation: landscape) {
  .infra-grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .infra-top h2 {
    font-size: 42px;
  }
}
/* =====================================================
   HOSTING PLANS
===================================================== */

.plans-section {
  position: relative;

  overflow: hidden;

  padding: 180px 8%;

  background: linear-gradient(180deg, #050009 0%, #090011 100%);
}

/* =====================================================
   BG
===================================================== */

.plans-bg {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 900px;
  height: 900px;

  transform: translate(-50%, -50%);

  background: rgba(138, 43, 226, 0.12);

  filter: blur(180px);

  opacity: 0.7;
}

/* GRID */

.plans-grid-bg {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  background-size: 70px 70px;

  opacity: 0.18;
}

/* =====================================================
   CONTAINER
===================================================== */

.plans-container {
  position: relative;

  z-index: 3;

  max-width: 1450px;

  margin: auto;
}

/* =====================================================
   TOP
===================================================== */

.plans-top {
  text-align: center;

  margin-bottom: 90px;
}

/* LABEL */

.plans-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 12px 22px;

  border: 1px solid rgba(138, 43, 226, 0.15);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.08),
    rgba(255, 255, 255, 0.03)
  );

  color: rgba(255, 255, 255, 0.78);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 4px;

  margin-bottom: 28px;
}

.plans-label::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: blueviolet;

  box-shadow:
    0 0 12px blueviolet,
    0 0 22px blueviolet;
}

/* TITLE */

.plans-top h2 {
  color: white;

  font-size: 72px;
  line-height: 0.95;

  font-weight: 900;

  margin-bottom: 24px;
}

/* DESC */

.plans-desc {
  max-width: 760px;

  margin: auto;

  color: rgba(255, 255, 255, 0.65);

  line-height: 2;

  font-size: 15px;
}

/* =====================================================
   GRID
===================================================== */

.plans-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}

/* =====================================================
   CARD
===================================================== */

.plan-card {
  position: relative;
  isolation: isolate;

  padding: 38px;

  border: 1px solid rgba(138, 43, 226, 0.14);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.05)
  );

  backdrop-filter: blur(16px);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;

  isolation: isolate;
}
/* =====================================================
   CURSOR GLOW
===================================================== */
/* GLOW FOLLOW CURSOR */

.plan-card::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  left: var(--x, 50%);
  top: var(--y, 50%);

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.28) 0%,
    rgba(138, 42, 255, 0.12) 35%,
    transparent 72%
  );

  opacity: 0;

  transition: opacity 0.35s ease;

  pointer-events: none;

  z-index: -1;

  filter: blur(24px);
}

/* HOVER */

.plan-card:hover::before {
  opacity: 1;
}

/* EXTRA HOVER */

.plan-card:hover {
  transform: translateY(-6px);

  border-color: rgba(138, 43, 226, 0.42);

  box-shadow:
    0 0 25px rgba(138, 43, 226, 0.14),
    0 0 60px rgba(138, 43, 226, 0.08);
}
/* GLOW */

.plan-glow {
  position: absolute;

  right: -70px;
  bottom: -70px;

  width: 200px;
  height: 200px;

  background: rgba(138, 43, 226, 0.18);

  filter: blur(80px);

  opacity: 0.7;

  z-index: -1;
}

/* TOP LINE */

.plan-top-line {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(90deg, transparent, blueviolet, transparent);
}

/* TYPE */

.plan-type {
  display: inline-block;

  color: #b26cff;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 18px;
}

/* TITLE */

.plan-card h3 {
  color: white;

  font-size: 34px;
  line-height: 1.05;

  margin-bottom: 18px;

  font-weight: 900;
}

/* TEXT */

.plan-text {
  color: rgba(255, 255, 255, 0.62);

  line-height: 1.9;

  font-size: 13px;

  margin-bottom: 28px;
}

/* FEATURES */

.plan-features {
  display: flex;
  flex-direction: column;

  gap: 14px;

  margin-bottom: 34px;
}

.plan-feature {
  display: flex;
  align-items: center;

  gap: 12px;

  color: rgba(255, 255, 255, 0.8);

  font-size: 13px;
}

.plan-feature i {
  color: #b26cff;

  width: 16px;
}

/* BUTTON */

.plan-btn {
  height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 26px;

  border: 1px solid rgba(138, 43, 226, 0.25);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.12),
    rgba(255, 255, 255, 0.03)
  );

  color: white;

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1px;

  transition: 0.3s ease;
}

.plan-btn:hover {
  transform: translateY(-3px);

  background: blueviolet;

  border-color: blueviolet;

  box-shadow: 0 0 20px rgba(138, 43, 226, 0.25);
}

/* FEATURED */

.featured-plan {
  transform: scale(1.04);

  border-color: rgba(138, 43, 226, 0.4);

  box-shadow: 0 0 35px rgba(138, 43, 226, 0.14);
}

/* BADGE */

.featured-badge {
  position: absolute;

  top: 18px;
  right: -34px;

  background: blueviolet;

  color: white;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1px;

  /* keep same anchor position but make the badge smaller and center text */
  padding: 6px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  white-space: nowrap;

  /* keep the rotated look but slightly scale down so it doesn't protrude */
  transform: rotate(45deg) scale(0.92);
  transform-origin: center;

  border-radius: 6px;
  border: 1px solid rgba(138, 43, 226, 0.16);
  z-index: 5;
}

/* =====================================================
   BOTTOM
===================================================== */

.plans-bottom {
  margin-top: 70px;

  display: flex;
  justify-content: center;
}

/* BTN */

.view-plans-btn {
  height: 56px;

  padding: 0 32px;

  display: inline-flex;
  align-items: center;
  gap: 14px;

  border: 1px solid rgba(138, 43, 226, 0.2);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.1),
    rgba(255, 255, 255, 0.03)
  );

  color: white;

  text-decoration: none;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 1px;

  transition: 0.35s ease;
}

.view-plans-btn:hover {
  transform: translateY(-4px);

  border-color: rgba(138, 43, 226, 0.45);

  box-shadow: 0 0 28px rgba(138, 43, 226, 0.16);
}

/* =====================================================
   RESPONSIVE
===================================================== */

/* DESKTOP ZOOM */

@media (max-width: 1400px) {
  .plans-top h2 {
    font-size: 60px;
  }
}

/* TABLET */

@media (max-width: 1100px) {
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-plan {
    transform: none;
  }
}

/* MOBILE PORTRAIT */

@media (max-width: 768px) and (orientation: portrait) {
  .plans-section {
    padding: 120px 6%;
  }

  .plans-top {
    margin-bottom: 50px;
  }

  .plans-top h2 {
    font-size: 34px;
  }

  .plans-desc {
    font-size: 12px;
  }

  .plans-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .plan-card {
    padding: 26px;
  }

  .plan-card h3 {
    font-size: 26px;
  }

  .plan-text,
  .plan-feature {
    font-size: 12px;
  }

  .featured-badge {
    font-size: 8px;
  }
}

/* MOBILE LANDSCAPE */

@media (max-width: 900px) and (orientation: landscape) {
  .plans-grid {
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
  }

  .plan-card {
    padding: 18px;
  }

  .plan-card h3 {
    font-size: 20px;
  }

  .plan-price {
    font-size: 24px;
  }
  .view-plans-btn {
    font-size: 10px;
    padding: 0 20px;
  }
  .plan-text,
  .plan-feature {
    font-size: 10px;
  }

  .plan-btn {
    font-size: 9px;
    padding: 8px 10px;
  }
}
/* =====================================================
   WHY HOSTING SECTION
===================================================== */

.why-hosting-section {
  position: relative;

  padding: 140px 8%;

  overflow: hidden;

  background: linear-gradient(
    180deg,
    rgba(5, 5, 12, 0.96),
    rgba(12, 8, 22, 0.98)
  );
}

/* BG */

.why-hosting-bg {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 700px;
  height: 700px;

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.16),
    transparent 70%
  );

  filter: blur(120px);

  pointer-events: none;
}

/* CONTAINER */

.why-hosting-container {
  position: relative;

  z-index: 2;
}

/* TOP */

.why-hosting-top {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 70px;
  padding: 0 20px;
}

.why-label {
  display: inline-block;

  color: #b26cff;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 4px;

  margin-bottom: 18px;
}

.why-hosting-top h2 {
  color: #ffffff;
  font-size: 52px;
  line-height: 1.15;
  font-weight: 900;
  margin: 0 auto 20px;
  letter-spacing: -0.03em;
  max-width: none;
}

.why-hosting-top h2 .why-highlight {
  color: #8a2be2;
  text-shadow: 0 0 20px rgba(138, 43, 226, 0.65);
}

.why-hosting-top p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 680px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.8;
}

/* GRID */

.why-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;
}

/* CARD */

.why-card {
  position: relative;

  overflow: hidden;

  padding: 34px;

  border: 1px solid rgba(138, 43, 226, 0.12);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.05)
  );

  backdrop-filter: blur(14px);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;

  isolation: isolate;
}

/* TOP LINE */

.why-line {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(90deg, transparent, blueviolet, transparent);
}

/* ICON */

.why-icon {
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 24px;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background: rgba(138, 43, 226, 0.08);

  color: #c084ff;

  font-size: 18px;
}

/* TITLE */

.why-card h3 {
  color: white;

  font-size: 18px;
  font-weight: 800;

  margin-bottom: 14px;
}

/* TEXT */

.why-card p {
  color: rgba(255, 255, 255, 0.62);

  line-height: 1.8;

  font-size: 13px;
}

/* CURSOR GLOW */

.why-card::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  left: var(--x, 50%);
  top: var(--y, 50%);

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.32),
    rgba(138, 43, 226, 0.12),
    transparent 72%
  );

  opacity: 0;

  transition: opacity 0.35s ease;

  filter: blur(24px);

  pointer-events: none;

  z-index: -1;
}

/* HOVER */

.why-card:hover {
  transform: translateY(-6px);

  border-color: rgba(138, 43, 226, 0.38);

  box-shadow:
    0 0 25px rgba(138, 43, 226, 0.14),
    0 0 60px rgba(138, 43, 226, 0.06);
}

.why-card:hover::before {
  opacity: 1;
}

/* =====================================================
   RESPONSIVE
===================================================== */

/* SMALL DESKTOP / ZOOM */

@media (max-width: 1400px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-hosting-top h2 {
    font-size: 48px;
  }
}

/* MOBILE PORTRAIT */

@media (max-width: 768px) and (orientation: portrait) {
  .why-hosting-section {
    padding: 100px 6%;
  }

  .why-hosting-top {
    margin-bottom: 50px;
  }

  .why-hosting-top h2 {
    font-size: 32px;
  }

  .why-hosting-top p {
    font-size: 13px;
  }

  .why-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .why-card {
    padding: 24px;
  }

  .why-card h3 {
    font-size: 16px;
  }
}
/* =====================================================
   CTA CINEMATIC SECTION
===================================================== */

.hosting-cta-section {
  position: relative;

  overflow: hidden;

  padding: 180px 8%;

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.18), transparent 45%),
    linear-gradient(180deg, #080810, #05050a);
}

/* =====================================================
   BG GLOW
===================================================== */

.hosting-cta-bg {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 900px;
  height: 900px;

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.14),
    rgba(0, 242, 255, 0.05),
    transparent 70%
  );

  filter: blur(140px);

  pointer-events: none;
}

/* =====================================================
   GRID
===================================================== */

.hosting-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  background-size: 80px 80px;

  mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));

  opacity: 0.25;
}

/* =====================================================
   CONTAINER
===================================================== */

.hosting-cta-container {
  position: relative;

  z-index: 2;

  max-width: 980px;

  margin: 0 auto;

  text-align: center;
}

/* =====================================================
   LABEL
===================================================== */

.hosting-cta-label {
  display: inline-block;

  padding: 10px 18px;

  margin-bottom: 26px;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background: rgba(138, 43, 226, 0.06);

  color: #c084ff;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 4px;

  backdrop-filter: blur(12px);

  box-shadow: 0 0 25px rgba(138, 43, 226, 0.08);
}

/* =====================================================
   TITLE
===================================================== */

.hosting-cta-container h2 {
  color: white;

  font-size: 96px;
  line-height: 0.9;

  font-weight: 900;

  letter-spacing: -3px;

  margin-bottom: 28px;

  text-shadow:
    0 0 25px rgba(138, 43, 226, 0.18),
    0 0 60px rgba(138, 43, 226, 0.08);
}

/* =====================================================
   TEXT
===================================================== */

.hosting-cta-container p {
  color: rgba(255, 255, 255, 0.68);

  font-size: 17px;
  line-height: 2;

  margin-bottom: 42px;
}

/* =====================================================
   BUTTONS
===================================================== */

.hosting-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 18px;

  flex-wrap: nowrap;
}

/* =====================================================
   BUTTON
===================================================== */

.hosting-btn {
  position: relative;

  overflow: hidden;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  height: 58px;

  padding: 0 28px;

  border: 1px solid rgba(138, 43, 226, 0.18);

  text-decoration: none;

  color: white;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 2px;

  backdrop-filter: blur(14px);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;

  isolation: isolate;
}

/* PRIMARY */

.primary-hosting-btn {
  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.18),
    rgba(138, 43, 226, 0.06)
  );

  box-shadow: 0 0 30px rgba(138, 43, 226, 0.14);
}

/* SECONDARY */

.secondary-hosting-btn {
  background: rgba(255, 255, 255, 0.03);
}

/* ICON */

.hosting-btn i {
  font-size: 13px;
}

/* =====================================================
   CURSOR GLOW
===================================================== */

.hosting-btn::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  left: var(--x, 50%);
  top: var(--y, 50%);

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.32),
    rgba(0, 242, 255, 0.1),
    transparent 70%
  );

  opacity: 0;

  transition: opacity 0.35s ease;

  filter: blur(24px);

  pointer-events: none;

  z-index: -1;
}

/* =====================================================
   HOVER
===================================================== */

.hosting-btn:hover {
  transform: translateY(-4px);

  border-color: rgba(138, 43, 226, 0.42);

  box-shadow:
    0 0 25px rgba(138, 43, 226, 0.18),
    0 0 60px rgba(138, 43, 226, 0.08);
}

.hosting-btn:hover::before {
  opacity: 1;
}

/* =====================================================
   RESPONSIVE
===================================================== */

/* SMALL DESKTOP / ZOOM */

@media (max-width: 1400px) {
  .hosting-cta-container h2 {
    font-size: 74px;
  }
}

/* TABLET */

@media (max-width: 1000px) {
  .hosting-cta-container h2 {
    font-size: 58px;
  }
}

/* MOBILE PORTRAIT */

@media (max-width: 768px) {
  .hosting-cta-section {
    padding: 120px 6%;
  }

  .hosting-cta-label {
    font-size: 9px;

    letter-spacing: 2px;

    padding: 8px 14px;
  }

  .hosting-cta-container h2 {
    font-size: 38px;

    line-height: 1;
  }

  .hosting-cta-container p {
    font-size: 13px;

    line-height: 1.8;
  }

  .hosting-cta-buttons {
    gap: 10px;
  }

  .hosting-btn {
    height: 44px;

    padding: 0 16px;

    font-size: 11px;

    letter-spacing: 0.5px;

    white-space: nowrap;
  }

  .hosting-btn i {
    font-size: 11px;
  }
}
/* =====================================================
   FOOTER
===================================================== */

.nz-footer {
  position: relative;

  padding: 25px 7% 20px;

  background: linear-gradient(
    180deg,
    rgba(8, 8, 12, 0.96),
    rgba(3, 3, 6, 0.98)
  );

  overflow: hidden;
}

/* =====================================================
   BG GLOW
===================================================== */

.nz-footer::before {
  content: "";

  position: absolute;

  top: -20px;
  left: 50%;

  transform: translateX(-50%);

  width: 300px;
  height: 70px;

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.25),
    transparent 75%
  );

  filter: blur(60px);

  pointer-events: none;
}

/* =====================================================
   LINE
===================================================== */

.footer-line {
  width: calc(100% + 16%);
  margin-left: -8%;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(192, 132, 252, 0.95),
    rgba(88, 166, 255, 0.95),
    transparent
  );

  box-shadow: 0 0 17px rgba(138, 43, 226, 0.35);
}

/* =====================================================
   TOP
===================================================== */

.nz-footer-top {
  display: flex;
  justify-content: space-between;

  align-items: center;

  gap: 80px;

  padding: 20px 0 25px;
}

/* =====================================================
   BRAND
===================================================== */

.nz-footer-brand {
  display: flex;
  align-items: center;

  gap: 26px;
}

.nz-footer-brand img {
  width: 72px;
  height: 72px;

  object-fit: contain;

  filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.4));
}

.nz-footer-copy p {
  color: white;

  font-size: 15px;
  font-weight: 700;

  margin-bottom: 2px;
  line-height: 1.3;
}

.nz-footer-copy span {
  color: white;

  font-size: 12px;
  line-height: 1.3;
}

/* =====================================================
   LINKS
===================================================== */

.nz-footer-links {
  display: flex;

  gap: 60px;
}

.footer-column {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.footer-title {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 10px;

  color: white;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.footer-title i {
  color: #c084fc;

  text-shadow: 0 0 15px rgba(192, 132, 252, 0.7);
}

.footer-column a {
  color: rgba(255, 255, 255, 0.55);

  text-decoration: none;

  font-size: 11px;

  transition: 0.3s;
}

.footer-column a:hover {
  color: white;

  transform: translateX(6px);

  text-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
}

/* =====================================================
   DIVIDER
===================================================== */

.footer-divider {
  position: relative;

  width: calc(100% + 16%);
  margin-left: -8%;
  margin-top: 15px;
  margin-bottom: 15px;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(192, 132, 252, 0.95),
    rgba(88, 166, 255, 0.95),
    transparent
  );
}
/* =====================================================
   BOTTOM
===================================================== */

.nz-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* NINAZEN */

.footer-logo-text {
  font-size: 20px;
  font-weight: 900;
  font-family: sekuya, sans-serif;

  letter-spacing: 4px;

  background: linear-gradient(90deg, white, violet, blueviolet);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================================================
   SOCIAL
===================================================== */

.footer-social {
  display: flex;

  gap: 12px;
}

.social-btn {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  color: white;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(138, 43, 226, 0.08)
  );

  transition: 0.35s;
}

.social-btn:hover {
  transform: translateY(-4px);

  border-color: rgba(138, 43, 226, 0.45);

  box-shadow:
    0 0 25px rgba(138, 43, 226, 0.25),
    0 0 60px rgba(138, 43, 226, 0.12);
}
/* =====================================================
   MOBILE PORTRAIT
===================================================== */

@media (max-width: 768px) {
  /* COPYRIGHT */

  .nz-footer-copy {
    min-width: 0;
  }

  .nz-footer-copy p,
  .nz-footer-copy span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .nz-footer-copy p {
    font-size: 6px;
    margin-bottom: 2px;
    line-height: 1.3;
  }

  .nz-footer-copy span {
    font-size: 5px;
    line-height: 1.3;
  }

  /* TITLE */

  .footer-title {
    font-size: 6px;
    gap: 3px;
    margin-bottom: 2px;
  }

  .footer-title i {
    font-size: 5px;
  }

  /* LINKS */

  .footer-column {
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
  }

  .footer-column a {
    font-size: 5px;
  }

  /* LOGO TEXT */

  .footer-logo-text {
    font-size: 9px;
    letter-spacing: 0.4px;
  }

  /* SOCIAL */

  .social-btn {
    width: 20px;
    height: 20px;
    font-size: 7px;
  }

  .nz-footer {
    overflow-x: auto;
  }

  .nz-footer-top {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .nz-footer-brand {
    gap: 10px;
  }

  .nz-footer-links {
    gap: 8px;
  }

  .nz-footer-bottom {
    flex-wrap: nowrap;
    gap: 8px;
  }
}

/* =====================================================
   SMALL PHONE
===================================================== */

@media (max-width: 480px) {
  .nz-footer {
    padding: 14px 4% 12px;
  }

  .nz-footer-top {
    gap: 12px;
  }

  .nz-footer-brand img {
    width: 34px;
    height: 34px;
  }

  .nz-footer-copy {
    min-width: 0;
  }

  .nz-footer-copy p,
  .nz-footer-copy span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .nz-footer-copy p {
    font-size: 5px;
    margin-bottom: 2px;
    line-height: 1.2;
  }

  .nz-footer-copy span {
    font-size: 4.5px;
    line-height: 1.2;
  }

  .nz-footer-links {
    gap: 8px;
  }

  .footer-title {
    font-size: 6px;
  }

  .footer-column {
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
  }

  .footer-column a {
    font-size: 5px;
  }

  .footer-logo-text {
    font-size: 9px;
    letter-spacing: 0.4px;
  }

  .social-btn {
    width: 18px;
    height: 18px;
    font-size: 7px;
  }

  .nz-footer {
    overflow-x: auto;
  }

  .nz-footer-top {
    flex-wrap: nowrap;
  }

  .nz-footer-bottom {
    flex-wrap: nowrap;
    gap: 8px;
  }
}

/* =====================================================
   MOBILE LANDSCAPE
===================================================== */

@media (max-width: 900px) and (orientation: landscape) {
  .nz-footer {
    padding: 16px 5% 14px;
  }

  .nz-footer-top {
    gap: 30px;
  }

  .nz-footer-brand img {
    width: 48px;
    height: 48px;
  }

  .nz-footer-copy p {
    font-size: 10px;
  }

  .nz-footer-copy span {
    font-size: 8px;
  }

  .nz-footer-links {
    gap: 24px;
  }

  .footer-title {
    font-size: 9px;
  }

  .footer-column a {
    font-size: 8px;
  }

  .footer-logo-text {
    font-size: 13px;
  }

  .social-btn {
    width: 28px;
    height: 28px;

    font-size: 10px;
  }
}
/*=====================================================
 TEAM
 ===================================================== */
.team-section {
  position: relative;
  padding: 140px 8%;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);
}
.team-section::before,
.team-section::after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  animation: TimeGlowMove 12s linear infinite;
}
.team-section::before {
  top: -180px;
  left: -180px;
  background: blueviolet;
}
.team-section::after {
  bottom: -200px;
  right: -160px;
  background: #008cff;
  animation-delay: 5s;
}
.team-container {
  position: relative;
  z-index: 3;

  max-width: 1750px;
  margin: auto;
}

/* =====================================================
 LAYOUT — two rows instead of one 4-col grid
 3 large cards on top (Co-Owner, Founder, Developer)
 5 small cards below (Management, Admin, Moderator, Helper, Builder)
===================================================== */
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.team-row-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 24px;
}

.team-row-bottom {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 16px;
}

.team-header {
  text-align: center;
  margin-bottom: 70px;
}

.team-header h2 {
  color: white;

  font-size: 58px;
  font-weight: 900;

  line-height: 1;

  margin-bottom: 18px;
}

.team-header h2 span {
  background: linear-gradient(90deg, blueviolet, var(--primary));

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.team-header p {
  max-width: 700px;

  margin: auto;

  color: rgba(255, 255, 255, 0.65);

  font-size: 14px;

  line-height: 2;
}
.team-label {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 12px 22px;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);

  backdrop-filter: blur(12px);

  color: rgba(255, 255, 255, 0.82);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 4px;

  text-transform: uppercase;

  overflow: hidden;

  box-shadow: 0 0 20px rgba(138, 43, 226, 0.08);
}

.team-label::before {
  content: "";

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #8b5cf6;

  box-shadow:
    0 0 8px #8b5cf6,
    0 0 18px #8b5cf6,
    0 0 35px #8b5cf6;
}

.team-label::after {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );

  animation: TimeShimmer 5s linear infinite;
}
.team-card {
  position: relative;

  overflow: hidden;

  border-radius: 3px;

  border: 1px solid rgba(138, 43, 226, 0.15);

  background:
    radial-gradient(circle at top, blueviolet, transparent 50%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);

  backdrop-filter: blur(16px);

  transition: 0.4s ease;
}

.team-card:hover {
  transform: translateY(-8px);

  border-color: rgba(138, 43, 226, 0.4);

  box-shadow:
    0 0 30px rgba(138, 43, 226, 0.15),
    0 0 60px rgba(138, 43, 226, 0.08);
}
.team-banner {
  position: relative;

  width: 100%;
  height: 220px;

  overflow: hidden;
}

.team-banner img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: 0.6s;
}

.team-card:hover .team-banner img {
  transform: scale(1.05);
}
.team-content {
  position: relative;
  z-index: 2;

  padding: 22px;
}

.mc-head {
  width: 58px;
  height: 58px;

  image-rendering: pixelated;
}

.team-profile h3 {
  color: white;

  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;

  margin-bottom: 5px;
}

.team-profile {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}

.team-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-country {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 4px 8px;
  margin-top: 15px;

  position: relative;
  left: 15px;

  background: rgba(138, 43, 226, 0.12);
  border: 1px solid rgba(138, 43, 226, 0.18);

  color: #c084fc;

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1px;

  white-space: nowrap;
}

.team-country img {
  width: 13px;
  height: 10px;
  object-fit: cover;
}
.role {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding: 6px 12px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.role::before {
  content: "◆";

  font-size: 10px;

  filter: drop-shadow(0 0 8px currentColor);
}

/* CEO & FOUNDER: blueviolet */
.founder-role,
.ceo-role,
.developer-role {
  color: var(--blue-violet);
  background: rgba(138, 43, 226, 0.18);
}
/* ADMIN & DEVELOPER: primary */
.management-role,
.admin-role,
.moderator-role,
.helper-role,
.builder-role {
  color: var(--primary);
  background: rgba(141, 101, 250, 0.18);
}
.team-content p {
  color: rgba(255, 255, 255, 0.65);

  font-size: 13px;

  line-height: 1.8;

  max-width: 230px;
}
.mc-skin {
  position: absolute;

  right: 20px;
  bottom: 150px;

  height: 185px;

  opacity: 0.96;

  z-index: 2;

  transition: 0.4s ease;

  filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.35))
    drop-shadow(0 0 40px rgba(138, 43, 226, 0.18));
}

.team-card:hover .mc-skin {
  transform: translateY(-10px);
}
.team-social {
  position: relative;
  z-index: 2;

  display: flex;

  gap: 14px;

  padding: 18px 22px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.team-social a {
  color: rgba(255, 255, 255, 0.65);

  font-size: 15px;

  transition: 0.3s;
}

.team-social a:hover {
  color: #c084fc;

  text-shadow: 0 0 15px #c084fc;
}
.team-card-glow {
  position: absolute;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.22),
    transparent 70%
  );

  transform: translate(-50%, -50%);

  pointer-events: none;

  opacity: 0;

  transition: 0.25s;

  z-index: 1;
}

.team-card:hover .team-card-glow {
  opacity: 1;
}

/* =====================================================
 SMALL CARD VARIANT — used for the bottom row of 5
 Same visual style, just scaled down to fit 5 across
===================================================== */
.team-card.small .team-banner {
  height: 120px;
}

.team-card.small .team-content {
  padding: 14px;
}

.team-card.small .mc-head {
  width: 40px;
  height: 40px;
}

.team-card.small .team-profile {
  grid-template-columns: 40px 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.team-card.small .team-profile h3 {
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.team-card.small .role {
  font-size: 9px;
  padding: 4px 8px;
  gap: 5px;
}

.team-card.small .team-content p {
  font-size: 11px;
  line-height: 1.5;
  max-width: 100%;
}

.team-card.small .mc-skin {
  height: 100px;
  bottom: 75px;
  right: 10px;
}

.team-card.small .team-social {
  padding: 10px 14px;
  gap: 10px;
}

.team-card.small .team-social a {
  font-size: 12px;
}

.team-card.small .team-country {
  font-size: 8px;
  padding: 3px 6px;
  margin-top: 8px;
  left: 25px;
}

/* keep it readable on smaller desktop / laptop widths */
@media (max-width: 1400px) {
  .team-row-bottom {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}
@media (max-width: 1000px) {
  .team-row-top {
    grid-template-columns: repeat(1, minmax(260px, 1fr));
  }
  .team-row-bottom {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

/* =====================================================
 ANIMATIONS 
===================================================== */
@keyframes TimeGlowMove {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(40px, -20px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes TimeShimmer {
  0% {
    left: -120%;
  }
  100% {
    left: 120%;
  }
}
/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {
  .team-section {
    padding: 100px 4%;
  }

  .team-header h2 {
    font-size: 46px;
  }

  .team-row-top {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .team-row-bottom {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }

  .team-banner {
    height: 180px;
  }

  .mc-skin {
    height: 140px;
    bottom: 120px;
  }

  .team-content {
    padding: 16px;
  }

  .team-profile h3 {
    font-size: 15px;
  }

  .team-content p {
    font-size: 12px;
  }

  .team-card.small .team-banner {
    height: 100px;
  }

  .role {
    padding: 2px 4px;
    font-size: 5px;
    gap: 3px;
  }

  .team-card.small .role {
    font-size: 5px;
    padding: 2px 4px;
    gap: 3px;
  }
}

/* =====================================================
   MOBILE PORTRAIT
===================================================== */

@media (max-width: 768px) {
  .team-section {
    padding: 80px 15px;
  }

  .team-header {
    margin-bottom: 40px;
  }

  .team-header h2 {
    font-size: 32px;
  }

  .team-header p {
    font-size: 12px;
  }

  /* =========================
     3 CARD BESAR
  ========================= */

  .team-row-top {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .team-banner {
    height: 90px;
  }

  .team-content {
    padding: 8px;
  }

  .mc-head {
    width: 28px;
    height: 28px;
  }

  .team-profile {
    grid-template-columns: 30px 1fr;
    gap: 6px;
    margin-bottom: 6px;
  }

  .team-profile h3 {
    font-size: 10px;
    letter-spacing: 0;
  }

  .team-content p {
    font-size: 8px;
    line-height: 1.4;
    max-width: 100%;
  }

  .mc-skin {
    height: 65px;
    right: 4px;
    bottom: 65px;
  }

  .team-country {
    display: none;
  }

  .team-social {
    padding: 8px;
    gap: 8px;
  }

  .team-social a {
    font-size: 10px;
  }

  /* =========================
     5 CARD BAWAH
  ========================= */

  .team-row-bottom {
    display: flex;

    overflow-x: auto;

    gap: 10px;

    padding-bottom: 10px;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;
  }

  .team-row-bottom::-webkit-scrollbar {
    display: none;
  }

  .team-row-bottom .team-card {
    min-width: 150px;

    flex-shrink: 0;

    scroll-snap-align: start;
  }

  .team-card.small .team-banner {
    height: 80px;
  }

  .team-card.small .mc-skin {
    height: 60px;
    bottom: 55px;
  }

  .team-card.small .team-profile h3 {
    font-size: 10px;
  }

  .team-card.small .team-content p {
    font-size: 8px;
  }
}

/* ==========================================
   HP PORTRAIT ONLY
========================================== */

@media (max-width: 768px) and (orientation: portrait) {
  .team-section {
    padding: 70px 15px;
  }

  .team-row-bottom {
    display: flex;

    overflow-x: auto;

    gap: 10px;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;
  }

  .team-row-bottom::-webkit-scrollbar {
    display: none;
  }

  .team-row-bottom .team-card {
    min-width: 150px;

    flex-shrink: 0;

    scroll-snap-align: start;
  }

  /* ===== TOP ===== */

  .team-row-top {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-template-areas:
      "founder founder"
      "owner developer";

    gap: 12px;
  }

  .founder {
    grid-area: founder;
  }

  .co-owner {
    grid-area: owner;
  }

  .developer {
    grid-area: developer;
  }

  /* founder besar */

  .founder .team-banner {
    height: 220px;
  }

  .founder .mc-skin {
    height: 140px;
    bottom: 60px;
  }

  /* co-owner & developer */

  .co-owner .team-banner,
  .developer .team-banner {
    height: 120px;
  }

  .co-owner .mc-skin,
  .developer .mc-skin {
    height: 80px;
    bottom: 80px;
    right: 8px;
  }

  /* ===== FONT MOBILE ===== */

  .team-profile h3 {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .role {
    font-size: 7px;
    padding: 4px 6px;
    letter-spacing: 1px;
  }

  .team-content {
    padding: 12px;
  }

  .team-content p {
    font-size: 10px;
    line-height: 1.5;
  }

  .mc-head {
    width: 40px;
    height: 40px;
  }

  .team-profile {
    grid-template-columns: 40px 1fr;
  }

  .team-country {
    font-size: 7px;
    padding: 2px 5px;
    margin-top: 6px;
    left: 0;
  }

  .team-social {
    padding: 10px 12px;
    gap: 10px;
  }

  .team-social a {
    font-size: 12px;
  }

  /* ===== 5 CARD BAWAH ===== */

  .team-row-bottom {
    display: flex;

    gap: 12px;

    overflow-x: auto;

    padding-bottom: 8px;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;
  }

  .team-row-bottom::-webkit-scrollbar {
    display: none;
  }

  .team-row-bottom .team-card {
    flex: none;

    width: 180px;

    scroll-snap-align: start;
  }

  .team-card.small .team-banner {
    height: 90px;
  }

  .team-card.small .mc-skin {
    height: 70px;
    bottom: 90px;
    right: 8px;
  }

  .team-card.small .team-profile h3 {
    font-size: 11px;
  }

  .team-card.small .role {
    font-size: 6px;
  }
}
.team-section,
.team-container,
.team-grid {
  overflow: hidden;
}

.team-row-top,
.team-row-bottom {
  min-width: 0;
}

/* =====================================================
   VERY SMALL PHONE
===================================================== */

@media (max-width: 480px) {
  .team-header h2 {
    font-size: 26px;
  }

  .team-banner {
    height: 75px;
  }

  .mc-skin {
    height: 55px;
    bottom: 55px;
  }

  .team-profile h3 {
    font-size: 9px;
  }

  .team-content p {
    font-size: 7px;
  }

  .team-row-bottom .team-card {
    min-width: 135px;
  }
}

/* =====================================================
   TEAM MODAL
===================================================== */

.team-modal {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 40px 0;
}

.team-modal.active {
  display: flex;
}

.team-modal-overlay {
  position: absolute;
  inset: 0;

  backdrop-filter: blur(18px);

  background: rgba(0, 0, 0, 0.75);
}

.team-modal-content {
  position: relative;

  width: 700px;
  max-width: 88vw;
  max-height: 85vh;

  overflow: hidden;

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);

  border: 1px solid rgba(138, 43, 226, 0.22);

  box-shadow: 0 0 40px rgba(138, 43, 226, 0.12);

  z-index: 2;
}

.team-modal-banner {
  height: 180px;
}

.team-modal-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-modal-profile {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 25px;
  padding: 20px 25px;
}

.profile-left {
  display: flex;
  gap: 24px;

  align-items: flex-start;
}
.profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 70px;
}
.profile-head img {
  width: 70px;

  border: 2px solid rgba(138, 43, 226, 0.25);

  box-shadow:
    0 0 15px rgba(138, 43, 226, 0.35),
    0 0 35px rgba(138, 43, 226, 0.15);

  transition: 0.3s;
}

.profile-head img:hover {
  transform: translateY(-3px);

  box-shadow:
    0 0 25px rgba(138, 43, 226, 0.6),
    0 0 60px rgba(138, 43, 226, 0.25);
}

.profile-info h2 {
  color: white;
  font-size: 22px;
  font-weight: 800;
}

.profile-role {
  display: inline-flex;
  align-items: center;

  margin-top: 6px;

  padding: 5px 10px;

  background: rgba(138, 43, 226, 0.12);

  border: 1px solid rgba(138, 43, 226, 0.18);

  color: #c084fc;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.profile-country {
  display: flex;
  align-items: center;
  gap: 5px;

  margin-top: 10px;

  padding: 4px 8px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 1px;

  color: #c084fc;

  background: rgba(138, 43, 226, 0.08);

  border: 1px solid rgba(138, 43, 226, 0.15);

  transition: 0.3s;
}

.profile-country:hover {
  transform: translateY(-2px);

  border-color: rgba(138, 43, 226, 0.4);

  box-shadow: 0 0 20px rgba(138, 43, 226, 0.2);
}

.profile-country img {
  width: 17px;
  height: 13px;
}

.profile-info p {
  margin-top: 50px;
  margin-left: -100px;
  color: rgba(255, 255, 255, 0.72);

  line-height: 1.8;

  max-width: 260px;

  font-size: 11px;
  line-height: 1.6;
}

.profile-right {
  position: relative;
  left: -25px;
}
.profile-right canvas {
  transform: translateY(15px);
  width: 185px !important;
  height: 230px !important;
}
.skin-glow {
  position: absolute;

  width: 220px;
  height: 220px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(138, 43, 226, 0.35),
    transparent 70%
  );

  filter: blur(40px);

  pointer-events: none;

  animation: SkinGlow 4s ease-in-out infinite;
}

@keyframes SkinGlow {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.team-information {
  padding: 0 25px 20px;
}

.team-information h3 {
  color: white;

  font-size: 15px;

  margin-bottom: 15px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 10px;
}

.info-grid div {
  padding: 10px;

  border: 1px solid rgba(138, 43, 226, 0.15);

  background: rgba(255, 255, 255, 0.02);
}

.info-grid span {
  font-size: 10px;

  color: #c084fc;
}

.info-grid p {
  margin-top: 4px;

  font-size: 12px;

  color: white;
}

.team-modal-social {
  display: flex;
  gap: 8px;

  padding: 15px 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.team-modal-social a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;

  padding: 8px 10px;

  color: white;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(138, 43, 226, 0.15);

  transition: 0.3s;
}
.team-modal-social a:hover {
  transform: translateY(-3px);

  border-color: rgba(138, 43, 226, 0.5);

  color: #c084fc;

  box-shadow:
    0 0 18px rgba(138, 43, 226, 0.25),
    0 0 35px rgba(138, 43, 226, 0.12);
}
.team-modal-social a i {
  font-size: 13px;

  transition: 0.3s;
}

.team-modal-social a:hover i {
  text-shadow:
    0 0 10px #c084fc,
    0 0 25px #c084fc;
}
.team-close {
  position: absolute;

  top: 12px;
  right: 12px;

  width: 32px;
  height: 32px;

  border: none;

  background: rgba(0, 0, 0, 0.4);

  color: white;

  cursor: pointer;

  z-index: 5;
}

.profile-role {
  position: relative;
  overflow: hidden;

  transition: 0.3s;
}

.profile-role:hover {
  border-color: rgba(138, 43, 226, 0.5);

  box-shadow:
    0 0 15px rgba(138, 43, 226, 0.25),
    0 0 30px rgba(138, 43, 226, 0.12);
}
.profile-country:hover {
  transform: translateY(-2px);

  border-color: rgba(138, 43, 226, 0.45);

  box-shadow:
    0 0 12px rgba(138, 43, 226, 0.25),
    0 0 25px rgba(138, 43, 226, 0.12);

  color: #d8b4fe;
}
.info-grid div {
  transition: 0.3s ease;
}

.info-grid div:hover {
  transform: translateY(-2px);

  border-color: rgba(138, 43, 226, 0.45);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.08),
    rgba(255, 255, 255, 0.02)
  );

  box-shadow:
    0 0 15px rgba(138, 43, 226, 0.18),
    0 0 30px rgba(138, 43, 226, 0.08);
}
.info-grid div {
  transition: 0.3s ease;
}

.info-grid div:hover {
  transform: translateY(-2px);

  border-color: rgba(138, 43, 226, 0.45);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.08),
    rgba(255, 255, 255, 0.02)
  );

  box-shadow:
    0 0 15px rgba(138, 43, 226, 0.18),
    0 0 30px rgba(138, 43, 226, 0.08);
}
.team-modal-social a {
  transition: 0.3s ease;
}

.team-modal-social a:hover {
  transform: translateY(-3px);

  color: #c084fc;

  border-color: rgba(138, 43, 226, 0.5);

  box-shadow:
    0 0 15px rgba(138, 43, 226, 0.25),
    0 0 30px rgba(138, 43, 226, 0.12);
}
.team-modal-social a:hover i {
  text-shadow:
    0 0 10px #c084fc,
    0 0 20px #c084fc;
}
.profile-head img:hover {
  transform: translateY(-3px);

  border-color: rgba(138, 43, 226, 0.5);

  box-shadow:
    0 0 20px rgba(138, 43, 226, 0.35),
    0 0 40px rgba(138, 43, 226, 0.15);
}
/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {
  .team-modal-content {
    width: 620px;
  }

  .team-modal-banner {
    height: 160px;
  }

  .profile-info h2 {
    font-size: 20px;
  }

  .profile-right canvas {
    width: 160px !important;
    height: 210px !important;
  }

  .profile-info p {
    max-width: 220px;
    font-size: 10px;
  }
}
/* =====================================================
   MOBILE LANDSCAPE
===================================================== */

@media (max-width: 768px) and (orientation: landscape) {
  .team-modal {
    padding: 15px;
  }

  .team-modal-content {
    width: 420px;
    max-width: 95vw;
    max-height: 90vh;

    overflow-y: auto;
  }

  .team-modal-banner {
    height: 90px;
  }

  .team-modal-profile {
    display: grid;

    grid-template-columns: 1fr 110px;

    gap: 10px;

    padding: 15px;
  }

  .profile-left {
    gap: 10px;
  }

  .profile-head {
    min-width: 50px;
  }

  .profile-head img {
    width: 50px;
  }

  .profile-info h2 {
    font-size: 14px;
  }

  .profile-role {
    font-size: 7px;

    padding: 4px 8px;

    letter-spacing: 1px;
  }

  .profile-country {
    margin-top: 8px;

    font-size: 7px;

    padding: 2px 5px;
  }

  .profile-country img {
    width: 10px;
    height: 7px;
  }

  .profile-info p {
    margin: 10px 0 0;

    max-width: 180px;

    font-size: 8px;

    line-height: 1.5;
  }

  .profile-right {
    left: 0;
  }

  .profile-right canvas {
    width: 110px !important;
    height: 150px !important;

    transform: none;
  }

  .skin-glow {
    width: 120px;
    height: 120px;
  }

  .team-information {
    padding: 0 15px 15px;
  }

  .team-information h3 {
    font-size: 12px;

    margin-bottom: 10px;
  }

  .info-grid {
    gap: 6px;
  }

  .info-grid div {
    padding: 7px;
  }

  .info-grid span {
    font-size: 8px;
  }

  .info-grid p {
    font-size: 9px;

    margin-top: 3px;
  }

  .team-modal-social {
    padding: 10px 15px;

    gap: 5px;

    flex-wrap: wrap;
  }

  .team-modal-social a {
    font-size: 8px;

    padding: 5px 8px;
  }

  .team-modal-social a i {
    font-size: 9px;
  }

  .team-close {
    width: 28px;
    height: 28px;

    top: 8px;
    right: 8px;
  }
}
/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) and (orientation: portrait) {
  .team-modal {
    padding: 20px;
  }

  .team-modal-content {
    width: 95vw;
    max-height: 90vh;
  }

  .team-modal-banner {
    height: 120px;
  }

  .team-modal-profile {
    padding: 15px;
    gap: 10px;
  }

  .profile-head img {
    width: 50px;
  }

  .profile-info h2 {
    font-size: 13px;
  }

  .profile-role {
    font-size: 7px;
    padding: 4px 8px;
  }

  .profile-country {
    font-size: 7px;
    padding: 2px 5px;
  }

  .profile-country img {
    width: 9px;
    height: 6;

    object-fit: contain;
  }

  .profile-info p {
    margin-top: 35px;
    margin-left: -70px;

    max-width: 180px;

    font-size: 8px;
    line-height: 1.5;
  }

  .profile-right {
    left: -10px;
  }

  .profile-right canvas {
    width: 120px !important;
    height: 170px !important;
  }

  .skin-glow {
    width: 140px;
    height: 140px;
  }

  .team-information {
    padding: 0 15px 15px;
  }

  .team-information h3 {
    font-size: 10px;
  }

  .info-grid {
    gap: 8px;
  }

  .info-grid div {
    padding: 8px;
  }

  .info-grid span {
    font-size: 8px;
  }

  .info-grid p {
    font-size: 7px;
  }

  .team-modal-social {
    padding: 12px 15px;
    gap: 6px;
  }

  .team-modal-social a {
    font-size: 8px;
    padding: 6px 8px;
  }

  .team-modal-social a i {
    font-size: 8px;
  }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {
  .team-modal-content {
    width: 98vw;
  }

  .team-modal-banner {
    height: 95px;
  }

  .profile-head img {
    width: 42px;
  }

  .profile-info h2 {
    font-size: 14px;
  }

  .profile-right canvas {
    width: 95px !important;
    height: 140px !important;
  }

  .profile-info p {
    margin-left: -55px;

    max-width: 140px;

    font-size: 8px;
  }

  .info-grid {
    gap: 6px;
  }

  .info-grid div {
    padding: 6px;
  }
}

/* =====================================================
   SUPPORT CENTER
===================================================== */

/* Reset & Sizing untuk menghindari layout miring */
.support-section,
.support-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.support-section {
  position: relative;
  width: 100%;
  padding: 100px 60px;
  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);
  overflow: hidden;
  font-family: sans-serif;
}

.support-section::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  top: -250px;
  right: -250px;
  background: blueviolet;
  filter: blur(250px);
  opacity: 0.25;
  pointer-events: none;
}

.support-section::after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  bottom: -300px;
  left: -250px;
  background: royalblue;
  filter: blur(250px);
  opacity: 0.25;
  pointer-events: none;
}
.support-glass-card {
  position: relative;

  max-width: 1300px;

  margin: auto;

  padding: 60px;

  background:
    radial-gradient(circle at top, rgba(138, 43, 226, 0.25), transparent 35%),
    radial-gradient(
      circle at bottom right,
      rgba(0, 140, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(180deg, #12051f 0%, #090014 45%, #05000c 100%);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 2px solid rgba(138, 43, 226, 0.6);

  overflow: hidden;

  transition: 0.4s ease;
}
.support-glass-card:hover {
  transform: translateY(-4px);

  border-color: rgba(168, 85, 247, 0.4);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(138, 43, 226, 0.15),
    0 0 120px rgba(59, 130, 246, 0.08);
}
.support-label {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 12px 22px;

  border: 1px solid rgba(138, 43, 226, 0.18);

  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.08),
    rgba(255, 255, 255, 0.03)
  );

  backdrop-filter: blur(12px);

  color: rgba(255, 255, 255, 0.82);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 4px;
  font-style: bold;

  text-transform: uppercase;

  overflow: hidden;

  box-shadow: 0 0 20px rgba(138, 43, 226, 0.08);
}

.support-label::before {
  content: "";

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #8b5cf6;

  box-shadow:
    0 0 8px #8b5cf6,
    0 0 18px #8b5cf6,
    0 0 35px #8b5cf6;
}

.support-label::after {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );

  animation: TimeShimmer 5s linear infinite;
}
.support-header,
.support-form {
  position: relative;
  z-index: 2;
}

.support-header {
  text-align: center;
  margin-bottom: 60px;
}

.support-header span {
  display: inline-block;
  padding: 10px 20px;
  background: rgba(138, 43, 226, 0.15);
  border: 1px solid rgba(138, 43, 226, 0.3);
  color: #c084fc;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
}

.support-header h2 {
  margin-top: 20px;
  font-size: 4rem;
  color: #fff;
  text-shadow:
    0 0 20px blueviolet,
    0 0 40px blueviolet;
}

.support-header p {
  color: #94a3b8;
  margin-top: 10px;
  text-shadow:
    0 0 20px blueviolet,
    0 0 40px blueviolet;
}

/* FORM LAYOUT */
.support-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* INPUT, SELECT, TEXTAREA */
.support-form input[type="text"],
.support-form input[type="email"],
.support-form select,
.support-form textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(138, 43, 226, 0.5);
  padding: 18px;
  color: white;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.support-form textarea {
  min-height: 180px;
  resize: vertical;
}

/* Efek Modern Glassmorphism & Glow saat Hover & Focus */
.support-form input[type="text"]:hover,
.support-form input[type="email"]:hover,
.support-form select:hover,
.support-form textarea:hover,
.upload-box:hover {
  background: rgba(138, 43, 226, 0.05);
  border-color: rgba(138, 43, 226, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.25);
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.8);
  border-color: #a855f7;
  box-shadow:
    0 0 15px rgba(168, 85, 247, 0.4),
    0 0 40px rgba(138, 43, 226, 0.15);
}

/* Styling Pilihan Dropdown Kategori */
.support-form select option {
  background: #0f0f15;
  color: #fff;
  padding: 15px;
}

.support-form select option:disabled {
  color: #555;
}

/* UPLOAD CONTAINER */
.upload-box.dragover {
  border-color: #a855f7;

  background: rgba(168, 85, 247, 0.08);

  box-shadow:
    0 0 35px rgba(168, 85, 247, 0.4),
    0 0 100px rgba(168, 85, 247, 0.15),
    inset 0 0 40px rgba(168, 85, 247, 0.1);

  transform: scale(1.015);
}

.upload-box.dragover .drop-overlay {
  opacity: 1;
  visibility: visible;
}
.drop-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: rgba(10, 10, 15, 0.75);

  backdrop-filter: blur(18px);

  opacity: 0;
  visibility: hidden;

  transition: all 0.35s ease;

  z-index: 10;
}

.drop-overlay i {
  font-size: 4rem;

  color: #a855f7;

  margin-bottom: 15px;

  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.8));
}

.drop-overlay h3 {
  color: white;

  font-size: 1.4rem;

  margin-bottom: 5px;
}

.drop-overlay span {
  color: #c084fc;
}
.upload-box {
  min-height: 200px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px dashed rgba(138, 43, 226, 0.4);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.upload-box:hover {
  transform: translateY(-4px);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(138, 43, 226, 0.06)
  );

  backdrop-filter: blur(15px);

  border-color: rgba(168, 85, 247, 0.5);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(138, 43, 226, 0.25);
}
.upload-box::before {
  content: "";

  position: absolute;

  top: 0;
  left: -150%;

  width: 80%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );

  transition: 0.8s;
}

.upload-box:hover::before {
  left: 150%;
}
.upload-box input[type="file"] {
  display: none;
}

.upload-box i {
  font-size: 3rem;
  color: blueviolet;
  margin-bottom: 15px;
  transition: all 0.35s ease;
}

.upload-box:hover i {
  transform: translateY(-6px) scale(1.1);

  color: #c084fc;

  filter: drop-shadow(0 0 15px rgba(192, 132, 252, 0.8));
}

.upload-box h4 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.upload-box p {
  color: #64748b;
  font-size: 0.85rem;
}

/* FILE PREVIEW WRAPPER & SLIDER (FIX BUG PANAH) */
.hidden {
  display: none !important;
}

.preview-wrapper {
  margin-top: 25px;
}

.file-counter {
  color: #c084fc;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 0.95rem;
}

.preview-slider-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

#previewContainer {
  display: flex;
  gap: 15px;
  cursor: grab;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;

  width: 100%;

  padding: 10px 60px;

  scrollbar-width: none;
}
#previewContainer:active {
  cursor: grabbing;
}

#previewContainer::-webkit-scrollbar {
  display: none;
  height: 6px;
}
#previewContainer::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}
#previewContainer::-webkit-scrollbar-thumb {
  background: rgba(138, 43, 226, 0.5);
  border-radius: 4px;
}

/* Tombol Navigasi Panah */
.preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(138, 43, 226, 0.3);
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(5px);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.preview-nav:hover {
  background: blueviolet;
  border-color: blueviolet;
  box-shadow: 0 0 15px blueviolet;
}

.preview-left {
  left: -20px;
}

.preview-right {
  right: -20px;
}

/* Item Preview di dalam Slider */
.preview-item {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(138, 43, 226, 0.3);
  background: #0a0a0f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

.preview-item i {
  font-size: 2.5rem;
  color: blueviolet;
  margin-bottom: 10px;
}

.preview-item span {
  font-size: 0.75rem;
  color: #cbd5e1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}

/* Tombol Hapus File */
.delete-file {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(220, 38, 38, 0.85);
  color: white;
  opacity: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.delete-file i {
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 0;
}

.preview-item:hover .delete-file {
  opacity: 1;
}

/* SEND TICKET BUTTON */
.send-btn-support {
  height: 60px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(90deg, blueviolet, blue, violet);
  background-size: 300% 300%;
  color: white;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.3s;
  animation: supportGlow 6s linear infinite;
  margin-top: 10px;
}

.send-btn-support:hover {
  box-shadow:
    0 0 20px blueviolet,
    0 0 40px rgba(138, 43, 226, 0.5);
  transform: translateY(-2px);
}
/* POPUP */
.toast {
  position: fixed;
  top: 25px;
  right: 25px;

  width: 340px;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 16px;

  border-radius: 5px;

  background: rgba(15, 15, 25, 0.75);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(138, 43, 226, 0.25);

  box-shadow:
    0 0 25px rgba(138, 43, 226, 0.18),
    0 0 50px rgba(59, 130, 246, 0.08);

  z-index: 99999;

  transform: translateX(420px);

  opacity: 0;

  transition: 0.4s ease;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-icon {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 15px;

  font-size: 20px;
}

.toast.success .toast-icon {
  background: rgba(34, 197, 94, 0.15);

  color: #22c55e;

  box-shadow: 0 0 20px rgba(34, 197, 94, 0.25);
}

.toast.error .toast-icon {
  background: rgba(239, 68, 68, 0.15);

  color: #ef4444;

  box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
}

.toast-title {
  color: white;
  font-weight: 700;
  margin-bottom: 4px;
}

.toast-message {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.5;
}
/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {
  .support-section {
    padding: 80px 35px;
  }

  .support-glass-card {
    padding: 45px;
  }

  .support-header h2 {
    font-size: 3.2rem;
  }

  .support-form {
    max-width: 100%;
  }

  .preview-item {
    width: 140px;
    height: 140px;
  }

  .send-btn-support {
    height: 58px;
    font-size: 1rem;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {
  .support-section {
    padding: 60px 15px;
  }

  .support-glass-card {
    padding: 28px;
  }

  .support-header {
    margin-bottom: 40px;
  }

  .support-header h2 {
    font-size: 2.4rem;
  }

  .support-header p {
    font-size: 14px;
  }

  .support-label {
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 2px;
  }

  .support-grid {
    gap: 15px;
  }

  .support-form {
    gap: 15px;
  }

  .support-form input,
  .support-form select,
  .support-form textarea {
    padding: 15px;
    font-size: 14px;
  }

  .support-form textarea {
    min-height: 150px;
  }

  .upload-box {
    min-height: 170px;
  }

  .upload-box i {
    font-size: 2.4rem;
  }

  .upload-box h4 {
    font-size: 1rem;
  }

  .upload-box p {
    font-size: 0.8rem;
  }

  .preview-item {
    width: 120px;
    height: 120px;
  }

  .preview-nav {
    width: 38px;
    height: 38px;
  }

  .preview-left {
    left: -5px;
  }

  .preview-right {
    right: -5px;
  }

  #previewContainer {
    padding: 10px 40px;
  }

  .send-btn-support {
    height: 55px;
    font-size: 0.95rem;
  }

  .toast {
    width: calc(100% - 20px);
    right: 10px;
    top: 10px;
  }
}

/* =========================================
   SMALL PHONE
========================================= */

@media (max-width: 480px) {
  .support-glass-card {
    padding: 22px;
  }

  .support-header h2 {
    font-size: 2rem;
  }

  .support-header p {
    font-size: 13px;
  }

  .support-form input,
  .support-form select,
  .support-form textarea {
    padding: 14px;
    font-size: 13px;
  }

  .preview-item {
    width: 100px;
    height: 100px;
  }

  .upload-box {
    min-height: 150px;
  }

  .send-btn-support {
    height: 52px;
    font-size: 0.9rem;
  }
}