/* =============================================================
   DiPStrategy Deep Royal Navy (#093564) Theme — NComputindo
   Warna background elegan terinspirasi dari dipstrategy.co.id
   Mempertahankan identitas aksen Cyan khas NComputindo
   ============================================================= */

:root {
  --dip-navy: #093564;
  --dip-navy-deep: #062548;
  --dip-navy-darker: #04172e;
  --dip-navy-card: #0b3666;
  --dip-navy-card-hover: #0f4684;
  --dip-border: rgba(255, 255, 255, 0.1);
  --dip-border-accent: rgba(25, 211, 197, 0.3);
  --dip-text: #cbd5e1;
  --dip-text-white: #ffffff;
  --dip-text-muted: #94a3b8;
  --dip-accent: #19d3c5;
}

/* ─── BASE & BODY ─── */
html, body {
  background-color: var(--dip-navy) !important;
  color: var(--dip-text) !important;
}

h1, h2, h3, h4, h5, h6,
.hero-copy h1, .hero-copy h2,
.section-heading h2, .section-header h2 {
  color: var(--dip-text-white) !important;
}

p, .lead, .hero-sub, .hero-desc, .hero-text, .hero p {
  color: var(--dip-text) !important;
}

strong {
  color: var(--dip-text-white) !important;
}

/* ─── HEADER / NAVBAR ─── */
header, .site-header, .header, .nav {
  background: rgba(9, 53, 100, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--dip-border) !important;
}

.nav-links a, .header-inner a {
  color: #e2e8f0 !important;
}

.nav-links a:hover, .header-inner a:hover,
.nav-links a.active {
  color: var(--dip-accent) !important;
}

/* ─── TRUST & VALUE STRIP ─── */
.trust, .value-strip {
  background: var(--dip-navy-deep) !important;
  border-top: 1px solid var(--dip-border) !important;
  border-bottom: 1px solid var(--dip-border) !important;
}

.trust-item strong { color: var(--dip-text-white) !important; }
.trust-item span { color: var(--dip-text-muted) !important; }
.value-item { color: var(--dip-text) !important; }
.value-item svg { stroke: var(--dip-accent) !important; }

/* ─── SECTIONS BACKGROUND ─── */
.services, .section-soft, .section-bg-soft,
.process, .process-bg, .tech, .portfolio, .blog,
.architecture, .benefits, .contact-section,
.coverage, .needs-grid-section {
  background-color: var(--dip-navy-deep) !important;
}

/* ─── CARDS & CONTAINERS ─── */
.problem-card, .problem-card-item,
.service-card, .benefit, .benefit-card,
.process-card, .blog-card, .portfolio-card,
.contact-card, .maintenance-card, .technology-card,
.architecture-card, .component-card, .need-card,
.check-item, .contact-item, .featured-box, .featured,
.calc-card, .calculator-card, .sidebar-box, .side-card {
  background: var(--dip-navy-card) !important;
  border: 1px solid var(--dip-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  color: var(--dip-text) !important;
}

.problem-card:hover, .problem-card-item:hover,
.service-card:hover, .benefit-card:hover,
.process-card:hover, .blog-card:hover, .portfolio-card:hover,
.contact-item:hover, .need-card:hover, .related-card:hover {
  background: var(--dip-navy-card-hover) !important;
  border-color: var(--dip-border-accent) !important;
  transform: translateY(-4px);
}

.problem-card h3, .problem-card-item h3,
.service-card h3, .benefit h3, .benefit-card h3,
.process-card h3, .blog-card h3, .portfolio-card strong,
.contact-card h2, .contact-item strong, .maintenance-card h3,
.technology-card strong, .architecture-card h3, .need-card h3 {
  color: var(--dip-text-white) !important;
}

.problem-card p, .problem-card-item p,
.service-card p, .benefit p, .benefit-card p,
.process-card p, .blog-card p, .contact-item span,
.maintenance-card p, .technology-card span, .need-card p {
  color: var(--dip-text) !important;
}

/* ─── ICONS & ACCENTS ─── */
.problem-icon, .icon, .benefit-icon, .contact-icon, .check {
  background: rgba(25, 211, 197, 0.12) !important;
  color: var(--dip-accent) !important;
}

.service-number, .process-number, .need-number,
.service-link, .blog-link, .related-link,
.eyebrow, .section-label, .section-heading .label {
  color: var(--dip-accent) !important;
}

.eyebrow::before {
  background: var(--dip-accent) !important;
}

/* ─── HERO CARDS & BADGES ─── */
.hero-card, .hero-badge {
  background: var(--dip-navy-card) !important;
  border: 1px solid var(--dip-border) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;
}

.hero-card strong, .hero-badge strong { color: var(--dip-text-white) !important; }
.hero-card span, .hero-badge span { color: var(--dip-text-muted) !important; }

/* ─── CALL TO ACTION BOX & CONSULT ─── */
.cta-box, .consult-card {
  background: linear-gradient(135deg, #093564 0%, #051b34 100%) !important;
  border: 1px solid var(--dip-border-accent) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.cta-box h2, .cta-content h2, .consult-card h2, .consult-card h3 {
  color: var(--dip-text-white) !important;
}

.cta-box p, .cta-content p, .consult-card p {
  color: var(--dip-text) !important;
}

.consult-box {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--dip-border) !important;
}

/* ─── FAQ & ACCORDION ─── */
details, .faq-accordion {
  background: var(--dip-navy-card) !important;
  border: 1px solid var(--dip-border) !important;
}

summary, .faq-accordion-q {
  color: var(--dip-text-white) !important;
}

summary::after {
  color: var(--dip-accent) !important;
}

details p, .faq-accordion-a, .faq-answer {
  color: var(--dip-text) !important;
}

/* ─── TAGS & BADGES ─── */
.tech-tag, .portfolio-tag, .filter, .category {
  background: var(--dip-navy-card) !important;
  border: 1px solid var(--dip-border) !important;
  color: var(--dip-text) !important;
}

.filter.active, .category.active, .category:hover {
  background: rgba(25, 211, 197, 0.18) !important;
  border-color: var(--dip-accent) !important;
  color: var(--dip-accent) !important;
}

/* ─── ARTICLES / BLOG DETAIL ─── */
.article-main {
  background: var(--dip-navy-card) !important;
  border: 1px solid var(--dip-border) !important;
}

.article-content p, .article-content li {
  color: var(--dip-text) !important;
}

.article-content h2, .article-content h3, .article-content h4,
.article-content strong {
  color: var(--dip-text-white) !important;
}

.article-content code {
  background: rgba(0, 0, 0, 0.3) !important;
  color: var(--dip-accent) !important;
}

.article-content pre {
  background: var(--dip-navy-deep) !important;
  border-color: var(--dip-border) !important;
}

.article-content blockquote {
  background: rgba(25, 211, 197, 0.08) !important;
  border-left-color: var(--dip-accent) !important;
}

/* ─── FOOTER ─── */
footer, .site-footer {
  background: var(--dip-navy-darker) !important;
  border-top: 1px solid var(--dip-border) !important;
}

.footer-title {
  color: var(--dip-text-white) !important;
}

.footer-links a, .footer-column a, .footer-contact a {
  color: var(--dip-text-muted) !important;
}

.footer-links a:hover, .footer-column a:hover, .footer-contact a:hover {
  color: var(--dip-accent) !important;
}

.footer-bottom, .copyright {
  border-top-color: var(--dip-border) !important;
  color: var(--dip-text-muted) !important;
}

/* ── PRODUCT CATALOG & PRICE SIMULATOR COMPONENT STYLES ── */
.nav-simulator-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: rgba(25, 211, 197, 0.12);
  border: 1px solid rgba(25, 211, 197, 0.35);
  color: var(--dip-accent) !important;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.nav-simulator-btn:hover {
  background: var(--dip-accent);
  color: #04172e !important;
  box-shadow: 0 0 15px rgba(25, 211, 197, 0.4);
}
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  line-height: 1;
}