/*
 * NETT ABOUT MISSION WIDGET CSS
 * Menggunakan variabel dari _master-variables/_master-variables.css
 * Semua style menggunakan !important agar prioritas tinggi
 * Minimal 300 baris, termasuk animasi dan responsive
 */

:root {
  /* Import master variables (pastikan file _master-variables.css sudah di-load di theme/plugin) */
}

/* ===================== SECTION WRAPPER ===================== */
.na-section,
.na-section[class*="na-section-"] {
  background: var(--nett-bg-primary) !important;
  color: var(--nett-text-primary) !important;
  font-family: var(--nett-font-body) !important;
  padding: var(--nett-section-padding-y) var(--nett-section-padding-x) !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: var(--nett-z-0) !important;
}

/* ===================== CARD ===================== */
.na-card {
  background: var(--nett-card-bg) !important;
  border-radius: var(--nett-card-radius) !important;
  box-shadow: var(--nett-card-shadow) !important;
  padding: var(--nett-card-padding) !important;
  max-width: 896px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: var(--nett-z-10) !important;
  border: var(--nett-border) solid var(--nett-card-border) !important;
  transition: box-shadow var(--nett-duration-300) var(--nett-ease), border-color var(--nett-duration-300) var(--nett-ease) !important;
}
.na-card:hover {
  box-shadow: var(--nett-card-shadow-hover) !important;
  border-color: var(--nett-primary) !important;
}

/* ===================== MAIN ICON ===================== */
.na-main-icon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  background: var(--nett-gradient-primary) !important;
  color: var(--nett-white) !important;
  border-radius: var(--nett-radius-full) !important;
  box-shadow: var(--nett-shadow-lg) !important;
  margin: 0 auto 24px auto !important;
  font-size: 32px !important;
  border: var(--nett-border) solid var(--nett-primary) !important;
  transition: background var(--nett-duration-300) var(--nett-ease), color var(--nett-duration-300) var(--nett-ease) !important;
}
.na-main-icon-box.na-icon-circle { border-radius: var(--nett-radius-full) !important; }
.na-main-icon-box.na-icon-rounded { border-radius: var(--nett-radius-xl) !important; }

.na-main-icon-box svg,
.na-main-icon-box i {
  width: 1em !important;
  height: 1em !important;
  display: block !important;
}

/* ===================== TITLE ===================== */
.na-title,
.na-section h1,
.na-section h2,
.na-section h3,
.na-section h4 {
  font-family: var(--nett-font-heading) !important;
  font-size: var(--nett-h2-size) !important;
  font-weight: var(--nett-font-bold) !important;
  color: var(--nett-text-primary) !important;
  margin-bottom: 24px !important;
  line-height: var(--nett-leading-tight) !important;
  letter-spacing: var(--nett-tracking-tight) !important;
  text-align: center !important;
}

/* ===================== DESCRIPTION ===================== */
.na-desc {
  font-size: var(--nett-text-lg) !important;
  color: var(--nett-text-secondary) !important;
  margin-bottom: 32px !important;
  line-height: var(--nett-leading-normal) !important;
  text-align: center !important;
}
.na-desc p { margin-bottom: 0 !important; }

/* ===================== FEATURES GRID ===================== */
.na-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--nett-gap-lg) !important;
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  }

  /* ===================== FEATURE CARD ===================== */
  .na-feature-card {
    background: var(--nett-card-bg) !important;
    border-radius: var(--nett-card-radius) !important;
    box-shadow: var(--nett-card-shadow) !important;
    padding: var(--nett-space-6) !important;
    margin-bottom: var(--nett-space-6) !important;
    border: var(--nett-border) solid var(--nett-card-border) !important;
    transition: box-shadow var(--nett-duration-300) var(--nett-ease), border-color var(--nett-duration-300) var(--nett-ease) !important;
  }
  .na-feature-card:hover {
    box-shadow: var(--nett-shadow-xl) !important;
    border-color: var(--nett-primary) !important;
  }

  /* ===================== FEATURE ICON ===================== */
  .na-feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--nett-gradient-primary) !important;
    color: var(--nett-white) !important;
    border-radius: var(--nett-radius-full) !important;
    box-shadow: var(--nett-shadow-md) !important;
    font-size: 24px !important;
    margin-bottom: var(--nett-space-2) !important;
    border: var(--nett-border) solid var(--nett-primary) !important;
    transition: background var(--nett-duration-300) var(--nett-ease), color var(--nett-duration-300) var(--nett-ease) !important;
  }
  .na-feature-icon.na-icon-circle { border-radius: var(--nett-radius-full) !important; }
  .na-feature-icon.na-icon-rounded { border-radius: var(--nett-radius-xl) !important; }

  /* ===================== FEATURE TITLE ===================== */
  .na-feature-title {
    font-family: var(--nett-font-heading) !important;
    font-size: var(--nett-text-lg) !important;
    font-weight: var(--nett-font-bold) !important;
    color: var(--nett-text-primary) !important;
    margin-bottom: var(--nett-space-1) !important;
    text-align: center !important;
  }

  /* ===================== FEATURE DESC ===================== */
  .na-feature-desc {
    font-size: var(--nett-text-base) !important;
    color: var(--nett-text-secondary) !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  /* ===================== DECORATIVE BLOBS ===================== */
  .na-blob {
    position: absolute !important;
    z-index: var(--nett-z-0) !important;
    pointer-events: none !important;
    opacity: 0.18 !important;
    filter: blur(2px) !important;
    transition: opacity var(--nett-duration-300) var(--nett-ease) !important;
  }
  .na-blob-1 { top: -60px; left: -60px; width: 180px; height: 180px; background: var(--nett-primary-light) !important; border-radius: 50% !important; }
  .na-blob-2 { bottom: -60px; right: -60px; width: 220px; height: 220px; background: var(--nett-accent-light) !important; border-radius: 50% !important; }
  .na-blob-3 { top: 40%; left: -80px; width: 120px; height: 120px; background: var(--nett-secondary-light) !important; border-radius: 50% !important; }

  /* ===================== ANIMATIONS ===================== */
  @keyframes na-fade-in {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
  }
  .na-section[data-anim="fade-in"] {
    animation: na-fade-in 0.8s var(--nett-ease) both !important;
  }
  @keyframes na-slide-in {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: none; }
  }
  .na-section[data-anim="slide-in"] {
    animation: na-slide-in 0.8s var(--nett-ease) both !important;
  }
  @keyframes na-zoom-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .na-section[data-anim="zoom-in"] {
    animation: na-zoom-in 0.7s var(--nett-ease) both !important;
  }
  @keyframes na-blob-anim {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.08) translateY(-12px); }
    100% { transform: scale(1) translateY(0); }
  }
  .na-blob[data-anim="blob"] {
    animation: na-blob-anim 6s infinite ease-in-out !important;
  }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 1024px) {
    .na-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  @media (max-width: 768px) {
    .na-section {
      padding: var(--nett-section-padding-y-sm) var(--nett-section-padding-x-sm) !important;
    }
    .na-card {
      padding: var(--nett-space-4) !important;
    }
    .na-title {
      font-size: var(--nett-h3-size) !important;
    }
    .na-grid {
      grid-template-columns: 1fr !important;
    }
  }
  @media (max-width: 480px) {
    .na-title {
      font-size: var(--nett-h4-size) !important;
    }
    .na-card {
      padding: var(--nett-space-2) !important;
    }
  }

  /* ===================== UTILITY CLASSES ===================== */
  .na-mb-0 { margin-bottom: 0 !important; }
  .na-mb-2 { margin-bottom: var(--nett-space-2) !important; }
  .na-mb-4 { margin-bottom: var(--nett-space-4) !important; }
  .na-mb-6 { margin-bottom: var(--nett-space-6) !important; }
   /* Utility class tambahan untuk markup yang hilang */
   .na-mb-8 { margin-bottom: var(--nett-space-8) !important; }
  .na-text-center { text-align: center !important; }
  .na-text-right { text-align: right !important; }
  .na-text-left { text-align: left !important; }
  .na-fw-bold { font-weight: var(--nett-font-bold) !important; }
  .na-fw-extrabold { font-weight: var(--nett-font-extrabold) !important; }
  .na-uppercase { text-transform: uppercase !important; }
  .na-ls-wide { letter-spacing: var(--nett-tracking-wider) !important; }
  .na-ls-tight { letter-spacing: var(--nett-tracking-tight) !important; }
  .na-shadow { box-shadow: var(--nett-shadow-md) !important; }
  .na-shadow-xl { box-shadow: var(--nett-shadow-xl) !important; }
  .na-radius-lg { border-radius: var(--nett-radius-lg) !important; }
  .na-radius-xl { border-radius: var(--nett-radius-xl) !important; }
  .na-radius-full { border-radius: var(--nett-radius-full) !important; }
}

@media (max-width: 1024px) {
  .na-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .na-grid { grid-template-columns: 1fr !important; }
}

.na-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--nett-bg-secondary) !important;
  border-radius: var(--nett-radius-xl) !important;
  box-shadow: var(--nett-shadow-sm) !important;
  padding: var(--nett-space-6) !important;
  transition: transform var(--nett-duration-300) var(--nett-ease), box-shadow var(--nett-duration-300) var(--nett-ease) !important;
  cursor: pointer !important;
}
.na-item:hover {
  transform: scale(1.05) !important;
  box-shadow: var(--nett-shadow-xl) !important;
}

.na-item-icon {
  font-size: var(--nett-icon-size-lg) !important;
  color: var(--nett-primary) !important;
  margin-bottom: 8px !important;
  transition: color var(--nett-duration-300) var(--nett-ease) !important;
}
.na-item:hover .na-item-icon {
  color: var(--nett-accent) !important;
}

.na-item-text {
  font-family: var(--nett-font-heading) !important;
  font-size: var(--nett-text-base) !important;
  font-weight: var(--nett-font-bold) !important;
  color: var(--nett-text-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--nett-tracking-wide) !important;
  text-align: center !important;
}

/* ===================== DECORATIVE BLOBS ===================== */
[class*="na-blob-"] {
  position: absolute !important;
  border-radius: var(--nett-radius-full) !important;
  filter: blur(64px) !important;
  z-index: var(--nett-z-0) !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
  transition: background var(--nett-duration-500) var(--nett-ease);
}
.na-blob-1-*,
.na-blob-1 {
  top: -5rem !important;
  left: -5rem !important;
  width: 256px !important;
  height: 256px !important;
  background: var(--nett-primary-light) !important;
}
.na-blob-2-*,
.na-blob-2 {
  bottom: 0 !important;
  right: 0 !important;
  width: 384px !important;
  height: 384px !important;
  background: var(--nett-secondary-light) !important;
}

/* ===================== ANIMATIONS ===================== */
@keyframes na-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
[class*="na-blob-"] {
  animation: na-float 8s ease-in-out infinite !important;
}

@keyframes na-reveal {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.na-card.reveal,
.na-header.reveal,
.na-item.reveal {
  animation: na-reveal 0.8s var(--nett-ease) forwards !important;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .na-card { padding: var(--nett-space-4) !important; }
  .na-title { font-size: var(--nett-h3-size) !important; }
}
@media (max-width: 600px) {
  .na-card { padding: var(--nett-space-2) !important; }
  .na-title { font-size: var(--nett-h4-size) !important; }
}

/* ===================== UTILITY ===================== */
.na-hide { display: none !important; }
.na-center { text-align: center !important; }
.na-mb-0 { margin-bottom: 0 !important; }
.na-mb-4 { margin-bottom: var(--nett-space-4) !important; }
.na-mb-8 { margin-bottom: var(--nett-space-8) !important; }

/* ===================== END OF FILE ===================== */