/* ABSENIKA Public Frontend V2.2 — bright feature cards + accessible contrast.
   Loaded AFTER marketing.css, frontend-v2.css, and frontend-v21.css.
   Restricted to the public marketing layout; no admin/school dashboard changes. */

/* The classic /fitur page uses .m-bento and .m-feature from marketing.css.
   They retained dark backgrounds from the old theme, while V2 uses dark text.
   Fix the card surface AND all nested copy rather than only changing the body. */
body.marketing-body.ab-v2 #fitur {
  background: #ffffff !important;
  color: #1b3151 !important;
}
body.ab-v2 #fitur .m-section-heading h2,
body.ab-v2 #fitur .m-section-heading h2 *,
body.ab-v2 #fitur .m-section-heading > div h2 {
  color: #182b49 !important;
  text-shadow: none !important;
}
body.ab-v2 #fitur .m-section-heading p {
  color: #586b84 !important;
}
body.ab-v2 #fitur .m-bento {
  gap: 18px;
}
body.ab-v2 #fitur .m-feature,
body.ab-v2 #fitur .m-feature-wide,
body.ab-v2 #fitur .m-feature-qr,
body.ab-v2 #fitur .m-feature-portal,
body.ab-v2 #fitur .m-feature-compact {
  background: #ffffff !important;
  border: 1px solid #dfe8f5 !important;
  color: #192f51 !important;
  box-shadow: 0 10px 28px rgba(25, 62, 112, .06) !important;
  border-radius: 20px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.ab-v2 #fitur .m-feature:hover {
  transform: translateY(-4px);
  border-color: #aacbf8 !important;
  box-shadow: 0 20px 42px rgba(28, 84, 159, .12) !important;
}
body.ab-v2 #fitur .m-feature h3,
body.ab-v2 #fitur .m-feature h4,
body.ab-v2 #fitur .m-feature strong {
  color: #152b4b !important;
  text-shadow: none !important;
}
body.ab-v2 #fitur .m-feature h3 { font-weight: 800; letter-spacing: -.5px; }
body.ab-v2 #fitur .m-feature p,
body.ab-v2 #fitur .m-feature > small {
  color: #516680 !important;
  line-height: 1.75;
}
body.ab-v2 #fitur .m-feature p { font-size: clamp(12px, .95vw, 14px); }
body.ab-v2 #fitur .m-feature > small { font-size: 11px; }
body.ab-v2 #fitur .m-feature-icon,
body.ab-v2 #fitur .m-feature-icon.blue {
  background: #eaf2ff !important;
  color: #196be9 !important;
  border: 1px solid #d6e5fb !important;
  box-shadow: 0 5px 16px rgba(28, 101, 205, .06);
}
body.ab-v2 #fitur .m-feature-icon .icon { color: inherit; }
body.ab-v2 #fitur .m-feature:nth-child(4n+1) .m-feature-icon {
  background: #e5faf5 !important;
  border-color: #c8f0e5 !important;
  color: #078e80 !important;
}
/* Keep the QR, analytics bars, avatars and example notification readable. */
body.ab-v2 #fitur .m-feature-qr-art .m-scan-frame {
  background: #ffffff !important;
  border-color: #e3ecf7 !important;
  box-shadow: 0 0 0 1px #c8e1f5, 0 14px 28px rgba(28, 62, 102, .12);
}
body.ab-v2 #fitur .m-qr-art-label {
  color: #087b70 !important;
  background: #e6faf2 !important;
  border-color: #a6e8d7 !important;
}
body.ab-v2 #fitur .m-mini-bars i {
  background: linear-gradient(180deg, #528df4 0%, #dceaff 100%);
}
body.ab-v2 #fitur .m-mini-bars i:nth-child(4) {
  background: linear-gradient(180deg, #2bc2a8 0%, #d7f6ee 100%);
}
body.ab-v2 #fitur .m-avatar-stack span {
  border-color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(31, 69, 111, .10);
}
body.ab-v2 #fitur .m-notice-demo {
  background: #f6faff !important;
  border: 1px solid #cfe2f8 !important;
  box-shadow: 0 16px 34px rgba(36, 76, 131, .10) !important;
  color: #163456 !important;
}
body.ab-v2 #fitur .m-notice-demo small { color: #496784 !important; }
body.ab-v2 #fitur .m-notice-demo strong { color: #15395e !important; }
body.ab-v2 #fitur .m-notice-demo p { color: #456480 !important; }
body.ab-v2 #fitur .m-notice-demo .m-notice-symbol {
  background: #ddf6ef !important;
  color: #0c8b74 !important;
}
body.ab-v2 #fitur .m-notice-demo .m-status {
  background: #e2f8ef !important;
  border-color: #c4eedb !important;
  color: #087f61 !important;
}
/* Classic "keunggulan" section directly below the cards must also be light. */
body.ab-v2 .m-benefits {
  background: #f4f8ff !important;
  border-color: #e4edf8 !important;
  color: #1c3455 !important;
}
body.ab-v2 .m-benefits h2,
body.ab-v2 .m-benefits h3 {
  color: #192f50 !important;
  text-shadow: none !important;
}
body.ab-v2 .m-benefits p,
body.ab-v2 .m-benefits .m-benefit-list article p {
  color: #536b88 !important;
}
body.ab-v2 .m-benefits .m-benefit-list article {
  border-bottom-color: #dce7f5 !important;
}
body.ab-v2 .m-benefits .m-benefit-list article b {
  color: #2474dd !important;
}
body.ab-v2 .m-benefits .m-text-link { color: #225cc5 !important; }
/* Make the light palette consistent on both the homepage feature grid and /fitur page. */
body.ab-v2 .ab-feature-card {
  background: #ffffff !important;
  color: #193254 !important;
  border-color: #dfe9f6 !important;
}
body.ab-v2 .ab-feature-card h3 { color: #193254 !important; }
body.ab-v2 .ab-feature-card p { color: #526983 !important; }
body.ab-v2 .ab-features,
body.ab-v2 .ab-process,
body.ab-v2 .m-showcase { color: #1a3456; }
/* Small screens: prevent QR artwork from colliding with headings. */
@media (max-width: 700px) {
  body.ab-v2 #fitur .m-bento { gap: 13px; }
  body.ab-v2 #fitur .m-feature { padding: 24px 21px; }
  body.ab-v2 #fitur .m-feature-qr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    gap: 22px;
  }
  body.ab-v2 #fitur .m-feature-qr > div:last-child {
    max-width: 100% !important;
    order: 1;
  }
  body.ab-v2 #fitur .m-feature-qr .m-feature-icon { margin-top: 0; }
  body.ab-v2 #fitur .m-feature-qr-art {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    order: 2;
    align-self: center;
    transform: none !important;
    margin-bottom: 8px;
  }
  body.ab-v2 #fitur .m-feature p { font-size: 12px; }
  body.ab-v2 #fitur .m-feature-portal {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  body.ab-v2 #fitur .m-feature-portal .m-notice-demo {
    transform: none !important;
    width: 100%;
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.ab-v2 #fitur .m-feature { transition: none; }
  body.ab-v2 #fitur .m-feature:hover { transform: none; }
}