.nx-btn,

button.nx-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  font-family: var(--font-heading, "Space Grotesk", sans-serif) !important;

  font-size: 0.875rem !important;

  font-weight: 600 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

  text-decoration: none !important;

  padding: 14px 28px !important;

  border-radius: var(--nx-radius-pill, 9999px) !important;

  border: 1px solid transparent !important;

  cursor: pointer !important;

  white-space: nowrap !important;

  line-height: 1 !important;

  outline: none !important;

  transition: all var(--nx-dur-fast, 0.25s) var(--nx-ease-smooth, ease) !important;

}



/* Primary Button (Mengikuti Token Modifier Aktif) */

.nx-btn-primary,

button.nx-btn-primary {

  background-color: var(--nx-c-primary) !important;

  color: var(--nx-bg-dark-base, #040914) !important;

  border-color: transparent !important;

  box-shadow: 0 0 20px var(--nx-c-accent-glow) !important;

}



.nx-btn-primary:hover,

button.nx-btn-primary:hover {

  filter: brightness(1.15) !important;

  box-shadow: 0 0 30px var(--nx-c-accent-glow) !important;

  transform: translateY(-2px) !important;

}



.nx-btn-secondary,

button.nx-btn-secondary {

  background: rgba(255, 255, 255, 0.05) !important;

  color: var(--nx-c-heading) !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

}



.nx-btn-secondary:hover,

button.nx-btn-secondary:hover {

  background: rgba(255, 255, 255, 0.12) !important;

  border-color: rgba(255, 255, 255, 0.4) !important;

  transform: translateY(-2px) !important;

}



.nx-btn span {

  color: inherit !important;

  font-family: inherit !important;

  font-size: inherit !important;

  font-weight: inherit !important;

  letter-spacing: inherit !important;

}



/* ==========================================================================

   COMPONENT: COMING SOON LAYOUT

   ========================================================================== */

.nx-coming-soon {

  position: relative !important;

  min-height: 100vh !important;

  width: 100% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 60px 20px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  background-color: var(--nx-bg-dark-base, #040914) !important;

}



.nx-gradient-bg {

  position: absolute !important;

  inset: 0 !important;

  background: 

    radial-gradient(circle at 15% 20%, rgba(var(--nx-c-primary-rgb), 0.2) 0%, transparent 45%),

    radial-gradient(circle at 85% 75%, var(--nx-c-navy-deep, rgba(11, 30, 63, 0.8)) 0%, transparent 55%),

    radial-gradient(circle at 50% 50%, rgba(var(--nx-c-primary-rgb), 0.1) 0%, transparent 60%) !important;

  pointer-events: none !important;

  z-index: 0 !important;

}



.nx-coming-soon-overlay {

  position: absolute !important;

  inset: 0 !important;

  background: radial-gradient(circle at center, transparent 30%, var(--nx-bg-dark-base, #040914) 100%) !important;

  pointer-events: none !important;

  z-index: 1 !important;

}



.nx-cs-container {

  position: relative !important;

  z-index: 2 !important;

  max-width: 820px !important;

  width: 100% !important;

  text-align: center !important;

  margin: 0 auto !important;

}



.nx-hero-headline {

  font-family: var(--font-heading) !important;

  font-size: var(--nx-fs-h1, clamp(2.5rem, 5vw, 4rem)) !important;

  font-weight: 700 !important;

  color: var(--nx-c-heading) !important;

  line-height: var(--nx-lh-h1, 1.1) !important;

  letter-spacing: -0.02em !important;

}



.nx-hero-subtext {

  font-family: var(--font-body) !important;

  font-size: var(--nx-fs-body-lg, 1.125rem) !important;

  color: var(--nx-text-muted) !important;

  line-height: var(--nx-lh-body-lg, 1.6) !important;

  max-width: 580px !important;

  margin: 16px auto 0 !important;

}



/* Card Timer */

.nx-timer-grid {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 16px !important;

  max-width: 520px !important;

  margin: 36px auto 0 !important;

}



.nx-timer-card {

  background: var(--nx-bg-surface, #0a1426) !important;

  border: 1px solid var(--nx-card-border, rgba(56, 189, 248, 0.18)) !important;

  border-radius: var(--nx-radius-md, 14px) !important;

  padding: 18px 12px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;

  transition: transform var(--nx-dur-fast) ease, border-color var(--nx-dur-fast) ease !important;

}



.nx-timer-card:hover {

  transform: translateY(-3px) !important;

  border-color: var(--nx-c-primary) !important;

}



.nx-timer-val {

  font-family: var(--font-heading) !important;

  font-size: 2.25rem !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  color: var(--nx-c-heading) !important;

}



.nx-timer-lbl {

  font-family: var(--font-body) !important;

  font-size: 0.75rem !important;

  font-weight: 500 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.08em !important;

  color: var(--nx-text-muted) !important;

  margin-top: 6px !important;

}



@media (max-width: 640px) {

  .nx-timer-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 12px !important;

  }

}



/* ==========================================================================

   ENHANCED EYEBROW & BRACKET COMPONENT (TOKENIZED)

   ========================================================================== */

.nx-eyebrow {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  font-family: var(--font-heading, "Space Grotesk", sans-serif) !important;

  font-size: var(--nx-fs-eyebrow, 0.8125rem) !important;

  font-weight: 700 !important;

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

  line-height: 1 !important;

  

  /* Warna teks di tengah bracket (otomatis ikut warna tema/modifier) */

  color: var(--nx-c-primary, #38bdf8) !important;

}



/* Styling Khusus Karakter Bracket [ ] */

.nx-bracket {

  display: inline-block !important;

  font-family: var(--font-heading, "Space Grotesk", sans-serif) !important;

  font-weight: 400 !important;

  /* Menggunakan warna aksen tema dengan transparansi atau warna kustom */

  color: var(--nx-bracket-color, rgba(var(--nx-c-primary-rgb, 56, 189, 248), 0.45)) !important;

  transition: color var(--nx-dur-fast, 0.25s) ease !important;

}



/* Hover Effect Opsional saat Eyebrow Disorot */

.nx-eyebrow:hover .nx-bracket {

  color: var(--nx-c-primary, #38bdf8) !important;

}







/* ==========================================================================

   COMPONENT: SOCIAL PROOF / TRUST BADGE (TOKENIZED)

   ========================================================================== */

.nx-trust-badge {

  display: inline-flex !important;

  align-items: center !important;

  gap: 14px !important;

  flex-wrap: wrap !important;

}



/* Avatar Stack Bertumpuk */

.nx-avatar-stack {

  display: flex !important;

  align-items: center !important;

}



.nx-avatar-stack img {

  width: 36px !important;

  height: 36px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  border: 2px solid var(--nx-bg-dark-base, #040914) !important;

  margin-left: -10px !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;

}



.nx-avatar-stack img:first-child {

  margin-left: 0 !important;

}



/* Bagian Bintang & Teks */

.nx-trust-info {

  display: flex !important;

  flex-direction: column !important;

  gap: 3px !important;

  text-align: left !important;

}



.nx-stars {

  display: flex !important;

  gap: 2px !important;

  color: #facc15 !important; /* Rating Gold */

  font-size: 0.8125rem !important;

  line-height: 1 !important;

}



.nx-trust-text {

  font-family: var(--font-body, "Inter", sans-serif) !important;

  font-size: 0.75rem !important;

  font-weight: 600 !important;

  letter-spacing: 0.05em !important;

  text-transform: uppercase !important;

  color: var(--nx-c-heading, #f8fafc) !important;

  margin: 0 !important;

}



/* Style Guide / Showcase Container */

.sg-block {

  margin-block: 32px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

}



.sg-title {

  font-family: var(--font-heading, "Space Grotesk", sans-serif);

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.1em;

  color: var(--nx-c-muted, #94a3b8);

  text-transform: uppercase;

}



/* ==========================================================================

   COMPONENT: ASYMMETRICAL SPLIT SHOWCASE (60:40 RATIO)

   ========================================================================== */

.nx-split-section {

  padding-block: 80px;

  width: 100%;

  position: relative;

  width: 100%;

  background-color: var(--nx-bg-dark-base);

}



/* Grid Desktop 60:40 (1.2fr : 0.8fr) */

.nx-asym-grid {

  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 56px;

  align-items: center;

}



/* Modifier Pembalik: Media di Kanan, Teks di Kiri */

.nx-split-reverse .nx-asym-grid {

  grid-template-columns: 0.8fr 1.2fr;

}

.nx-split-reverse .nx-asym-media-wrap {

  order: 2;

}

.nx-split-reverse .nx-asym-content {

  order: 1;

}

/* ==========================================================================

   ASYMMETRICAL SPLIT SECTION (RESPONSIVE GRID SYSTEM)

   ========================================================================== */



.nx-split-section {

  position: relative;

  width: 100%;

  padding: 100px 0;

  background-color: var(--nx-bg-dark-subtle);

  overflow: hidden;

}



/* Base Grid: Desktop 2 Kolom Asimetris (Rasio 1.1fr : 0.9fr) */

.nx-asym-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  align-items: center;

  gap: var(--nx-space-xl, 32px);

  width: 100%;

}



/* Varian Reverse Kolom (Desktop): Menukar posisi Media dan Teks */

.nx-split-reverse .nx-asym-grid {

  grid-template-columns: 0.85fr 1.15fr;

}



.nx-split-reverse .nx-asym-media-wrap {

  order: 2; /* Memindahkan media ke sebelah kanan */

}



.nx-split-reverse .nx-asym-content {

  order: 1; /* Memindahkan teks ke sebelah kiri */

}



/* Media Stage Wrap */

.nx-asym-media-wrap {

  position: relative;

  width: 100%;

  border-radius: var(--nx-radius-lg, 20px);

  overflow: hidden;

  border: 1px solid var(--nx-card-border);

  background: var(--nx-bg-surface);

}



.nx-asym-media-wrap img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

}



/* ==========================================================================

   BREAKPOINTS: TABLET & MOBILE RESPONSIVE

   ========================================================================== */



@media (max-width: 991px) {

  .nx-split-section {

    padding: 60px 0;

  }



  /* Ubah Grid menjadi 1 Kolom Vertikal Penuh */

  .nx-asym-grid,

  .nx-split-reverse .nx-asym-grid {

    grid-template-columns: 1fr;

    gap: var(--nx-space-md, 24px);

  }



  /* Normalisasi Urutan Tampilan Mobile: Gambar Selalu di Atas */

  .nx-split-reverse .nx-asym-media-wrap,

  .nx-asym-media-wrap {

    order: 1;

  }



  .nx-split-reverse .nx-asym-content,

  .nx-asym-content {

    order: 2;

  }

}

/* --------------------------------------------------------------------------

   Media Stage & Slideshow (60% Column)

   -------------------------------------------------------------------------- */

.nx-asym-media-wrap {

  position: relative;

  width: 100%;

  border-radius: var(--nx-radius-lg, 20px);

  overflow: hidden;

  background-color: var(--nx-bg-surface, #0a1426);

  border: 1px solid var(--nx-card-border, rgba(56, 189, 248, 0.18));

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);

}



.nx-slideshow {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--nx-bg-dark-subtle, #081120);

}



/* Transisi Halus Antar Slide */

.nx-slide-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  visibility: hidden;

  transform: scale(1.04);

  transition: opacity 800ms ease, transform 1200ms ease;

  will-change: opacity, transform;

}



.nx-slide-img.is-active {

  opacity: 1;

  visibility: visible;

  transform: scale(1);

}



/* Floating Exterior Showcase Badge */

.nx-media-badge {

  position: absolute;

  bottom: 20px;

  left: 20px;

  background: rgba(4, 9, 20, 0.75);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: var(--nx-c-primary, #38bdf8);

  font-family: var(--font-heading, "Space Grotesk", sans-serif);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  padding: 8px 16px;

  border-radius: var(--nx-radius-pill, 9999px);

  border: 1px solid var(--nx-card-border, rgba(56, 189, 248, 0.25));

  z-index: 3;

  pointer-events: none;

}



/* --------------------------------------------------------------------------

   Editorial Content & Feature List (40% Column)

   -------------------------------------------------------------------------- */

.nx-asym-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  text-align: left;

  gap: var(--nx-space-sm, 16px);

}



.nx-align-left {

  align-self: flex-start !important;

}



.nx-h2 {

  font-family: var(--font-heading, "Space Grotesk", sans-serif);

  font-size: var(--nx-fs-h2, clamp(1.85rem, 3.5vw, 2.75rem));

  font-weight: 700;

  line-height: var(--nx-lh-h2, 1.25);

  color: var(--nx-c-heading, #f8fafc);

  letter-spacing: -0.015em;

  margin: 0;

}

/* ==========================================================================

   NEXWEB EDITORIAL / BODY UTILITY CLASSES

   ========================================================================== */



/* Lead Paragraph (Teks Pengantar Lebih Tegas & Terang) */

.nx-lead {

  font-family: var(--font-body);

  font-size: var(--nx-fs-body-lg, 1.125rem);

  line-height: var(--nx-lh-body-lg, 1.6);

  color: var(--nx-c-heading);

  margin-bottom: 12px;

}



/* Standard Body Text */

.nx-body {

  font-family: var(--font-body);

  font-size: var(--nx-fs-body, 1rem);

  line-height: 1.6;

}



/* Muted / Secondary Text Utility (Menggunakan token tema --nx-c-muted) */

.nx-text-muted {

  color: var(--nx-c-muted) !important;

}

/* Feature Bullet List */

.nx-feature-list {

  list-style: none;

  padding: 0;

  margin: 16px 0 0 0;

  display: flex;

  flex-direction: column;

  gap: 16px;

  width: 100%;

}



.nx-feature-item {

  display: flex;

  align-items: center;

  gap: 14px;

}



/* Bullet Dot Bercahaya Adaptif Sesuai Tema */

.nx-bullet-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background-color: var(--nx-c-primary, #38bdf8);

  box-shadow: 0 0 10px var(--nx-c-primary, #38bdf8);

  flex-shrink: 0;

}



.nx-feature-text {

  font-family: var(--font-body, "Inter", sans-serif);

  font-size: var(--nx-fs-body, 1rem);

  color: var(--nx-c-heading, #f8fafc);

  font-weight: 500;

  line-height: 1.5;

}



/* --------------------------------------------------------------------------

   Mobile & Responsive Adjustments

   -------------------------------------------------------------------------- */

@media (max-width: 991px) {

  .nx-asym-grid {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .nx-split-reverse .nx-asym-media-wrap,

  .nx-split-reverse .nx-asym-content {

    order: unset;

  }



  .nx-split-section {

    padding-block: 50px;

  }

}



/* Utility Canvas Section di NexWeb */

.nx-bg-base {

  background-color: var(--nx-bg-dark-base) !important;

}



.nx-bg-subtle {

  background-color: var(--nx-bg-dark-subtle) !important;

}



.nx-bg-surface {

  background-color: var(--nx-bg-surface) !important;

}



/* ==========================================================================

   NEXWEB DESIGN SYSTEM - HERO SHOWCASE COMPONENT

   Target: .nx-hero-showcase

   ========================================================================== */



.nx-hero-showcase {

  position: relative;

  width: 100%;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--nx-bg-dark-base);

  color: var(--nx-c-muted);

  font-family: var(--font-body);

  overflow: hidden;

  padding: 120px 24px 80px;

}



/* Background Atmosphere / Dynamic Radial Glow */

.nx-hero-showcase::before {

  content: '';

  position: absolute;

  top: 20%;

  left: 50%;

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

  width: 600px;

  height: 600px;

  background: radial-gradient(

    circle,

    var(--nx-c-accent-glow) 0%,

    rgba(var(--nx-c-primary-rgb), 0.05) 40%,

    transparent 70%

  );

  filter: blur(80px);

  pointer-events: none;

  z-index: 0;

}



/* Inner Layout Container */

.nx-hero-showcase .nx-hero-container {

  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: var(--nx-space-md);

}



/* Eyebrow / Category Tag */

.nx-hero-showcase .nx-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-family: var(--font-heading);

  font-size: var(--nx-fs-eyebrow);

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--nx-c-primary);

}



.nx-hero-showcase .nx-bracket {

  color: rgba(var(--nx-c-primary-rgb), 0.45);

}



/* Big Display Headline */

.nx-hero-showcase .nx-hero-headline {

  font-family: var(--font-heading);

  font-size: var(--nx-fs-h1);

  line-height: var(--nx-lh-h1);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--nx-c-heading);

  text-transform: uppercase;

  max-width: 900px;

  margin: 0;

}



/* Action Group / Button Container */

.nx-hero-showcase .nx-hero-actions {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: var(--nx-space-sm);

  flex-wrap: wrap;

  margin-top: var(--nx-space-xs);

}



//* ==========================================================================

   HERO FULLSCREEN SHOWCASE (BACKGROUND COVER + OVERLAY)

   ========================================================================== */



.nx-hero-showcase {

  position: relative;

  width: 100%;

  min-height: 100vh;

  min-height: 100svh;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  background-color: var(--nx-bg-dark-base);

  padding: 120px 0 60px;

}



/* 1. LAYER GAMBAR BACKGROUND (DESKTOP & MOBILE COVER) */

.nx-hero-showcase .nx-hero-bg-layer {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  pointer-events: none;

}



.nx-hero-showcase .nx-hero-bg-layer picture,

.nx-hero-showcase .nx-hero-bg-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center bottom;

  display: block;

}



/* 2. OVERLAY GRADIEN AGAR TEKS SELALU TERBACA JELAS */

.nx-hero-showcase .nx-hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background: linear-gradient(

    180deg,

    rgba(8, 12, 16, 0.85) 0%,

    rgba(8, 12, 16, 0.45) 40%,

    rgba(8, 12, 16, 0.1) 60%,

    rgba(8, 12, 16, 0.95) 100%

  );

}



/* 3. KONTAINER KONTEN */

.nx-hero-showcase .nx-container-lg {

  position: relative;

  z-index: 3;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: calc(100vh - 180px);

}



/* HEADLINE & KONTEN ATAS */

.nx-hero-showcase .nx-hero-content-top {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: var(--nx-space-xs);

  max-width: 820px;

  margin: 0 auto;

}



.nx-hero-showcase .nx-eyebrow {

  font-family: var(--font-heading);

  font-size: var(--nx-fs-eyebrow);

  font-weight: 700;

  letter-spacing: 0.16em;

  color: var(--nx-c-primary);

  text-transform: uppercase;

  margin-bottom: 4px;

}



.nx-hero-showcase .nx-bracket {

  color: rgba(var(--nx-c-primary-rgb), 0.45);

}



.nx-hero-showcase .nx-hero-headline {

  font-family: var(--font-heading);

  font-size: var(--nx-fs-h1);

  line-height: var(--nx-lh-h1);

  font-weight: 800;

  color: var(--nx-c-heading);

  letter-spacing: -0.02em;

  text-transform: uppercase;

  margin: 0;

  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);

}



.nx-hero-showcase .nx-hero-subtext {

  font-family: var(--font-body);

  font-size: var(--nx-fs-body-lg);

  line-height: var(--nx-lh-body-lg);

  color: var(--nx-c-heading) !important;

  margin: 0 auto;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);

}



/* 4. RUANG TENGAH (PEMBERI RUANG MOBIL) */

.nx-hero-showcase .nx-car-stage-spacer {

  flex: 1;

  min-height: 260px;

}



/* RESPONSIVE MOBILE TWEAKS */

@media (max-width: 768px) {

  .nx-hero-showcase {

    padding-top: 90px;

  }

  .nx-hero-showcase .nx-car-stage-spacer {

    min-height: 180px;

  }

  .nx-hero-showcase .nx-hero-overlay {

    background: linear-gradient(

      180deg,

      rgba(8, 12, 16, 0.9) 0%,

      rgba(8, 12, 16, 0.3) 50%,

      rgba(8, 12, 16, 0.95) 100%

    );

  }

}