/**
 * Intilogy — global visual system (enterprise elevation, batik CTAs, unified palette)
 * Loaded on all public pages after theme-enterprise.css
 */

:root {
  --fx-navy: #0b1f3a;
  --fx-navy-mid: #132d52;
  --fx-navy-deep: #1a3d6b;
  --fx-surface: #f4f6f9;
  --fx-surface-alt: #eef2f7;
  --fx-accent: var(--color-blue-700, #0b4da2);
  --fx-accent-glow: rgba(11, 77, 162, 0.18);
  /* Enterprise flat elevation (no chunky “bottom lip” 3D) */
  --fx-shadow-3d: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 20px rgba(15, 23, 42, 0.07);
  --fx-shadow-3d-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 14px 36px rgba(11, 77, 162, 0.12);
  --fx-radius-card: 14px;
}

/* ——— Typography: clear, enterprise ——— */
body,
.btn,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ——— Page canvas (all URLs) ——— */
#main.page-enter {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(11, 77, 162, 0.06), transparent 55%),
    linear-gradient(180deg, var(--fx-surface) 0%, #ffffff 14%, var(--fx-surface) 100%);
}

/* ——— Inner page heroes → navy gradient ——— */
.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2.75rem, 5vw, 4rem);
  background: linear-gradient(135deg, var(--fx-navy) 0%, var(--fx-navy-mid) 48%, var(--fx-navy-deep) 100%);
  border-bottom: none;
  color: #fff;
}

.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(0, 174, 239, 0.12), transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(255, 255, 255, 0.05), transparent 38%);
  pointer-events: none;
  z-index: 0;
}

.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) .container {
  position: relative;
  z-index: 1;
}

.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) .page-hero-title,
.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) h1 {
  color: #fff !important;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.18);
}

.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) .lead,
.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) .page-intro,
.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) .lead-meta {
  color: rgba(255, 255, 255, 0.9) !important;
}

.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) .breadcrumb,
.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) .breadcrumb a {
  color: rgba(255, 255, 255, 0.72);
}

.page-hero:not(.product-detail-hero):not(.mkt-hero):not(.hero-home) .breadcrumb a:hover {
  color: #fff;
}

/* ——— Sections on gray canvas ——— */
.section:not(.page-hero):not(.mkt-hero):not(.hero-home) {
  position: relative;
}

.home-page-section--surface,
.marketing-landing-body,
.solution-landing-body--visual {
  background: transparent;
}

/* ——— Cards: flat enterprise elevation (site-wide) ——— */
.home-interactive-card,
.solution-card,
.solution-card-rich,
.solution-card-compact,
.solution-usecase-card,
.home-hub-strip-card,
.home-technical-card,
.home-quick-path-card,
.home-implementation-link,
.deployment-card,
.architecture-card,
.architecture-layer-card,
.vendor-logo-card,
.case-card,
.faq-item,
.layanan-hub-item,
.mkt-journey-card,
.mkt-case-index-card--enterprise,
.mkt-case-preview-card,
.mkt-carousel-card,
.mkt-cat-card,
.mkt-hub-side,
.mkt-pill-card,
.mkt-why-box,
.mkt-partner-card,
.mkt-feature-card,
.hero-solution-card,
.hero-spotlight-card,
.product-card,
.product-inquiry-card,
.industry-card,
.brand-case-study-card,
.client-logo-card,
.client-card,
.article-technical-pillar-card,
.eeat-expertise-card,
.procurement-list li,
.trust-stat,
.cta-dark,
.enterprise-conversion-inner,
.contact-thanks-panel {
  position: relative;
  border-radius: var(--fx-radius-card);
  box-shadow: var(--fx-shadow-3d);
  transition:
    transform 280ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 280ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {

  .home-interactive-card:hover,
  .solution-card:hover,
  .solution-card-rich:hover,
  .solution-card-compact:hover,
  .solution-usecase-card:hover,
  .home-hub-strip-card:hover,
  .home-technical-card:hover,
  .home-quick-path-card:hover,
  .home-implementation-link:hover,
  .deployment-card:hover,
  .architecture-card:hover,
  .architecture-layer-card:hover,
  .vendor-logo-card:hover,
  .case-card:hover,
  .layanan-hub-item:hover,
  .mkt-journey-card:hover,
  .mkt-case-index-card--enterprise:hover,
  .mkt-case-preview-card:hover,
  .mkt-carousel-card:hover,
  .mkt-cat-card:hover,
  .mkt-hub-side:hover,
  .hero-solution-card:hover,
  .hero-spotlight-card:hover,
  .product-card:hover,
  .product-inquiry-card:hover,
  .industry-card:hover,
  .brand-case-study-card:hover,
  .client-logo-card:hover,
  .client-card:hover,
  .article-technical-pillar-card:hover,
  .eeat-expertise-card:hover,
  .mkt-partner-card:hover,
  .mkt-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fx-shadow-3d-hover);
  }
}

/* Card top highlight */
.home-interactive-card::before,
.solution-card::before,
.solution-card-rich::before,
.mkt-journey-card::before,
.mkt-case-index-card--enterprise::before,
.mkt-case-preview-card::before,
.product-card::before,
.industry-card::before,
.deployment-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  z-index: 1;
}

@media (hover: hover) {

  .home-interactive-card:hover::before,
  .solution-card:hover::before,
  .solution-card-rich:hover::before,
  .mkt-journey-card:hover::before,
  .mkt-case-index-card--enterprise:hover::before,
  .mkt-case-preview-card:hover::before,
  .product-card:hover::before,
  .industry-card:hover::before,
  .deployment-card:hover::before {
    opacity: 0.85;
  }
}

/* ——— Image depth in cards & heroes ——— */
.mkt-case-index-media,
.mkt-hero-visual,
.hero-solution-card-icon,
.vendor-logo-card img,
.case-card img,
.mkt-partner-card img,
.product-card-media,
.brand-card-media {
  overflow: hidden;
  border-radius: calc(var(--fx-radius-card) - 4px);
}

.mkt-case-index-media img,
.mkt-hero-visual img,
.vendor-logo-card img,
.case-card img,
.mkt-partner-card img {
  transition: transform 500ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1));
}

@media (hover: hover) {

  .mkt-case-index-card--enterprise:hover .mkt-case-index-media img,
  .case-card:hover img,
  .vendor-logo-card:hover img,
  .mkt-partner-card:hover img {
    transform: scale(1.04);
  }
}

.mkt-hero-visual {
  border-radius: var(--fx-radius-card);
  box-shadow: var(--fx-shadow-3d);
  transform: none;
  transition: transform 400ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 400ms ease;
}

@media (hover: hover) and (min-width: 900px) {
  .mkt-hero-inner--split:hover .mkt-hero-visual {
    transform: translateY(-4px);
    box-shadow: var(--fx-shadow-3d-hover);
  }
}

/* ——— Stat blocks ——— */
.trust-stat,
.hero-trust-metric,
.mkt-mini-stat,
.mkt-pill-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(11, 77, 162, 0.1);
  box-shadow: var(--fx-shadow-3d);
}

.trust-stat strong,
.hero-trust-metric-value,
.mkt-mini-stat strong,
.mkt-pill-card strong {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: var(--fx-navy);
  letter-spacing: -0.02em;
}

.trust-stat span,
.hero-trust-metric-label,
.mkt-mini-stat span,
.mkt-pill-card span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted, #64748b);
}

/* ——— Buttons: enterprise flat + batik (all public pages) ——— */
body:not(.admin-body) .btn-primary,
body:not(.admin-body) .btn-secondary,
body:not(.admin-body) .btn-outline {
  border-radius: 999px;
}

body:not(.admin-body) .btn-primary {
  background: linear-gradient(180deg, var(--color-blue-600, #1268d6) 0%, var(--fx-accent) 100%) !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 8px 22px var(--fx-accent-glow) !important;
  transform: translateY(0);
  transition:
    transform 180ms var(--ease-out, ease),
    box-shadow 180ms var(--ease-out, ease),
    filter 180ms ease !important;
}

@media (hover: hover) {
  body:not(.admin-body) .btn-primary:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.26) inset,
      0 2px 4px rgba(15, 23, 42, 0.08),
      0 12px 28px var(--fx-accent-glow) !important;
  }

  body:not(.admin-body) .btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.16) inset,
      0 1px 2px rgba(15, 23, 42, 0.1),
      0 4px 14px rgba(11, 77, 162, 0.16) !important;
  }
}

/* Tombol terang (putih): kontras teks + border jelas */
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp) {
  background: #ffffff !important;
  border: 1px solid #000 !important;
  color: var(--color-blue-700, #0b4da2) !important;
  -webkit-text-stroke: 0.3px #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 6px 16px rgba(11, 77, 162, 0.08);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp) {
  background: #ffffff !important;
  border: 1px solid #000 !important;
  color: var(--color-blue-700, #0b4da2) !important;
  -webkit-text-stroke: 0.3px #000;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

@media (hover: hover) {

  body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp):hover {
    transform: translateY(-1px);
    background: #eef5ff !important;
    border-color: #000 !important;
    color: #083d82 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 2px 4px rgba(11, 77, 162, 0.1),
      0 10px 22px rgba(11, 77, 162, 0.14) !important;
  }

  body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):active,
  body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp):active {
    transform: translateY(0);
    background: #e3effc !important;
    border-color: #000 !important;
    box-shadow: 0 1px 3px rgba(11, 77, 162, 0.12) !important;
  }
}

/*
 * Motif batik tombol — cap kiri + kanan (mirror), tengah bersih untuk label.
 */
:root {
  --batik-cap-opacity-light: 0.36;
  --batik-cap-opacity-navy: 0.32;
  --batik-tribal-tile: url("/images/dayakkultur.png");
  --batik-surface-opacity: 0.03;
  --batik-surface-opacity-light: 0.03;
  --batik-footer-opacity: var(--batik-surface-opacity);
  --batik-footer-tile-h: cover;
  --batik-surface-tile-h-section: cover;
  --batik-surface-tile-h-card: cover;
  --batik-surface-filter-light: none;
  --batik-hero-opacity: 0.03;
  --batik-hero-emboss-shadow: 0;
  --batik-hero-tile-h: cover;
}

body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp) {
  --batik-cap-w: clamp(2.35rem, 5.5vw, 3.15rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-inline: max(1.15rem, var(--batik-cap-w));
  text-align: center;
}

body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp)>*,
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)>*,
body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)>* {
  position: relative;
  z-index: 1;
}

body:not(.admin-body) .btn-sm:not(.btn-wa-link):not(.btn-whatsapp) {
  --batik-cap-w: clamp(1.85rem, 4vw, 2.35rem);
}

body:not(.admin-body) .btn-hero:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .header-cta {
  --batik-cap-w: clamp(2.65rem, 6vw, 3.45rem);
}

body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp)::before,
body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp)::after,
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)::before,
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)::after,
body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)::before,
body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--batik-cap-w);
  max-width: 42%;
  background-image: url("/images/decor/batik-btn-cap.svg");
  background-repeat: no-repeat;
  background-size: auto 92%;
  background-position: left center;
  opacity: var(--batik-cap-opacity-light);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.35s ease;
  filter: none;
}

body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp)::before,
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)::before,
body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)::before {
  left: 0;
  background-position: left center;
}

body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp)::after,
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)::after,
body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)::after {
  right: 0;
  left: auto;
  transform: scaleX(-1);
  background-position: left center;
}

/* Secondary di panel gelap — jangan pakai gaya putih */
body:not(.admin-body) .hero-slideshow .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .slide-ctas .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .cta-dark .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .cta-dark-actions .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .mkt-cta-band .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp) {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  box-shadow: none;
}

/* Hero terang (studi kasus, rental, dll.) — secondary harus navy, bukan outline putih */
body:not(.admin-body) .mkt-hero--light .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .mkt-hero--light .btn-outline:not(.btn-wa-link):not(.btn-whatsapp),
body:not(.admin-body) .mkt-hero--light .mkt-btn-outline {
  background: #ffffff !important;
  border: 1.5px solid rgba(11, 77, 162, 0.38) !important;
  color: var(--color-blue-700, #0b4da2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 6px 16px rgba(11, 77, 162, 0.08) !important;
}

@media (hover: hover) {

  body:not(.admin-body) .hero-slideshow .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .slide-ctas .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .cta-dark .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .cta-dark-actions .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .mkt-cta-band .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp):hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  }

  body:not(.admin-body) .mkt-hero--light .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .mkt-hero--light .btn-outline:not(.btn-wa-link):not(.btn-whatsapp):hover,
  body:not(.admin-body) .mkt-hero--light .mkt-btn-outline:hover {
    transform: translateY(-1px);
    background: #eef5ff !important;
    border-color: rgba(11, 77, 162, 0.5) !important;
    color: #083d82 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 2px 4px rgba(11, 77, 162, 0.1),
      0 10px 22px rgba(11, 77, 162, 0.14) !important;
  }
}

/* Tombol putih / terang: cap navy — kontras kuat */
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)::before,
body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)::after,
body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)::before,
body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)::after {
  background-image: url("/images/decor/batik-btn-cap-navy.svg");
  opacity: var(--batik-cap-opacity-navy);
  filter: none;
}

body:not(.admin-body) .hero-slideshow .btn-secondary:not(.btn-wa-link)::before,
body:not(.admin-body) .hero-slideshow .btn-secondary:not(.btn-wa-link)::after,
body:not(.admin-body) .slide-ctas .btn-secondary:not(.btn-wa-link)::before,
body:not(.admin-body) .slide-ctas .btn-secondary:not(.btn-wa-link)::after,
body:not(.admin-body) .cta-dark .btn-secondary:not(.btn-wa-link)::before,
body:not(.admin-body) .cta-dark .btn-secondary:not(.btn-wa-link)::after,
body:not(.admin-body) .cta-dark-actions .btn-secondary:not(.btn-wa-link)::before,
body:not(.admin-body) .cta-dark-actions .btn-secondary:not(.btn-wa-link)::after,
body:not(.admin-body) .mkt-cta-band .btn-secondary:not(.btn-wa-link)::before,
body:not(.admin-body) .mkt-cta-band .btn-secondary:not(.btn-wa-link)::after,
body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link)::before,
body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link)::after,
body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-outline:not(.btn-wa-link)::before,
body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-outline:not(.btn-wa-link)::after,
body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link)::before,
body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link)::after,
body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-outline:not(.btn-wa-link)::before,
body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-outline:not(.btn-wa-link)::after {
  background-image: url("/images/decor/batik-btn-cap.svg");
  opacity: var(--batik-cap-opacity-light);
  filter: none;
}

/* Hero home: secondary putih → hover biru, cap ikut invert */
body:not(.admin-body) .hero-home .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp) {
  background: #ffffff !important;
  border: 1.5px solid rgba(11, 77, 162, 0.35) !important;
  color: var(--color-blue-700, #0b4da2) !important;
}

@media (hover: hover) {
  body:not(.admin-body) .hero-home .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover {
    background: linear-gradient(180deg, var(--color-blue-600, #1268d6) 0%, var(--fx-accent) 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.2) inset,
      0 8px 22px rgba(11, 77, 162, 0.28) !important;
  }

  body:not(.admin-body) .hero-home .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover::before,
  body:not(.admin-body) .hero-home .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover::after {
    background-image: url("/images/decor/batik-btn-cap.svg");
    opacity: 0.48;
  }
}

@media (hover: hover) {

  body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp):hover::before,
  body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp):hover::after {
    opacity: 0.48;
  }

  body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover::before,
  body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp):hover::after,
  body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp):hover::before,
  body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp):hover::after {
    opacity: 0.44;
  }

  body:not(.admin-body) .hero-slideshow .btn-secondary:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .hero-slideshow .btn-secondary:not(.btn-wa-link):hover::after,
  body:not(.admin-body) .slide-ctas .btn-secondary:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .slide-ctas .btn-secondary:not(.btn-wa-link):hover::after,
  body:not(.admin-body) .cta-dark .btn-secondary:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .cta-dark .btn-secondary:not(.btn-wa-link):hover::after,
  body:not(.admin-body) .cta-dark-actions .btn-secondary:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .cta-dark-actions .btn-secondary:not(.btn-wa-link):hover::after,
  body:not(.admin-body) .mkt-cta-band .btn-secondary:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .mkt-cta-band .btn-secondary:not(.btn-wa-link):hover::after,
  body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link):hover::after,
  body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-outline:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .page-hero:not(.hero-home):not(.mkt-hero--light) .btn-outline:not(.btn-wa-link):hover::after,
  body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-secondary:not(.btn-wa-link):hover::after,
  body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-outline:not(.btn-wa-link):hover::before,
  body:not(.admin-body) .mkt-hero:not(.mkt-hero--light) .btn-outline:not(.btn-wa-link):hover::after {
    opacity: 0.36;
  }
}

@media (prefers-reduced-motion: reduce) {

  body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp)::before,
  body:not(.admin-body) .btn-primary:not(.btn-wa-link):not(.btn-whatsapp)::after,
  body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)::before,
  body:not(.admin-body) .btn-secondary:not(.btn-wa-link):not(.btn-whatsapp)::after,
  body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)::before,
  body:not(.admin-body) .btn-outline:not(.btn-wa-link):not(.btn-whatsapp)::after {
    transition: opacity 0.35s ease;
  }
}

/* ——— Dark CTA bands ——— */
.cta-dark,
.mkt-block--dark,
.enterprise-conversion-inner {
  background: linear-gradient(135deg, var(--fx-navy) 0%, var(--fx-navy-mid) 50%, var(--fx-navy-deep) 100%) !important;
  border-radius: var(--fx-radius-card);
  box-shadow: var(--fx-shadow-3d);
}

/* ——— Marketing body alignment ——— */
.marketing-landing-body,
.solution-landing-body--visual {
  background: var(--fx-surface) !important;
}

.marketing-landing-body>.container>.mkt-block--alt,
.solution-landing-body--visual>.container>.mkt-block--alt {
  border-radius: var(--fx-radius-card);
  box-shadow: var(--fx-shadow-3d);
}

/* ——— Accent tags ——— */
.mkt-tag,
.mkt-journey-num {
  color: var(--fx-accent) !important;
}

/* ——— Home hero capability cards ——— */
.hero-solution-card {
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(11, 77, 162, 0.12);
  box-shadow: var(--fx-shadow-3d);
}

@media (hover: hover) {
  .hero-solution-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fx-shadow-3d-hover);
  }
}

.hero-home.home-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 110% 75% at 50% 18%, rgba(11, 77, 162, 0.028) 0%, transparent 62%),
    #ffffff;
}

/* Hero: tribal samar + emboss 3D ringan (tile putih → navy via filter) */
.hero-home.home-page-hero::before,
.hero-home.home-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--batik-tribal-tile);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto var(--batik-hero-tile-h);
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 64% at 50% 40%, #000 0%, #000 32%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 64% at 50% 40%, #000 0%, #000 32%, transparent 78%);
}

.hero-home.home-page-hero::before {
  opacity: var(--batik-hero-emboss-shadow);
  transform: translate(1px, 1.5px);
  filter: brightness(0) saturate(100%) invert(10%) sepia(18%) saturate(500%) hue-rotate(182deg);
}

.hero-home.home-page-hero::after {
  opacity: var(--batik-hero-opacity);
  transform: translate(-0.5px, -0.5px);
  filter: brightness(0) saturate(100%) invert(14%) sepia(12%) saturate(320%) hue-rotate(182deg) brightness(1.08);
}

.hero-home.home-page-hero>.hero-home-inner,
.hero-home.home-page-hero .hero-home-inner {
  position: relative;
  z-index: 1;
}

/* ——— Reveal: enterprise (no rotateX) ——— */
html.js-reveal-ready [data-reveal="card"].is-visible {
  animation: fx-card-enter 520ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes fx-card-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion: reduce) {

  .mkt-hero-visual,
  .home-interactive-card,
  .solution-card,
  .solution-card-rich,
  .mkt-journey-card,
  .mkt-case-index-card--enterprise,
  .product-card,
  body:not(.admin-body) .btn-primary,
  body:not(.admin-body) .btn-secondary {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html.js-reveal-ready [data-reveal="card"].is-visible {
    animation: none;
  }

  .mkt-case-index-media img,
  .case-card img {
    transform: none !important;
  }
}

/* ——— Tribal motif: footer + kartu/CTA box saja (bukan section lebar) ——— */
.site-footer,
.cta-dark,
.mkt-cta-band,
.mkt-block--dark,
.home-interactive-card,
.solution-card,
.solution-card-rich,
.solution-card-compact,
.solution-usecase-card,
.home-hub-strip-card,
.home-technical-card,
.home-quick-path-card,
.home-implementation-link,
.deployment-card,
.architecture-card,
.architecture-layer-card,
.vendor-logo-card,
.case-card,
.faq-item,
.layanan-hub-item,
.mkt-journey-card,
.mkt-case-index-card--enterprise,
.mkt-case-preview-card,
.mkt-carousel-card,
.mkt-cat-card,
.mkt-hub-side,
.mkt-pill-card,
.mkt-why-box,
.mkt-partner-card,
.mkt-feature-card,
.hero-solution-card,
.hero-spotlight-card,
.product-card,
.product-inquiry-card,
.industry-card,
.brand-case-study-card,
.client-logo-card,
.client-card,
.article-technical-pillar-card,
.eeat-expertise-card,
.positioning-pillar-card {
  isolation: isolate;
}

/* Kotak gelap (cta-dark, dll.) — motif putih seperti footer */
.cta-dark::after,
.mkt-cta-band::after,
.mkt-block--dark::after,
.cta-dark.home-interactive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: var(--batik-surface-opacity);
  background-image: var(--batik-tribal-tile);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--batik-surface-tile-h-card);
  filter: none;
  pointer-events: none;
}

/* Kartu terang — tile kecil + filter navy (bukan cta-dark / blok gelap) */
.home-interactive-card:not(.cta-dark):not(.mkt-block--dark):not(.mkt-cta-band)::after,
.solution-card::after,
.solution-card-rich::after,
.solution-card-compact::after,
.solution-usecase-card::after,
.home-hub-strip-card::after,
.home-technical-card::after,
.home-quick-path-card::after,
.home-implementation-link::after,
.deployment-card::after,
.architecture-card::after,
.architecture-layer-card::after,
.vendor-logo-card::after,
.case-card::after,
.faq-item::after,
.layanan-hub-item::after,
.mkt-journey-card::after,
.mkt-case-index-card--enterprise::after,
.mkt-case-preview-card::after,
.mkt-carousel-card::after,
.mkt-cat-card::after,
.mkt-hub-side::after,
.mkt-pill-card::after,
.mkt-why-box::after,
.mkt-partner-card::after,
.mkt-feature-card::after,
.hero-solution-card::after,
.hero-spotlight-card::after,
.product-card::after,
.product-inquiry-card::after,
.industry-card::after,
.brand-case-study-card::after,
.client-logo-card::after,
.client-card::after,
.article-technical-pillar-card::after,
.eeat-expertise-card::after,
.positioning-pillar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: var(--batik-surface-opacity-light);
  background-image: var(--batik-tribal-tile);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto var(--batik-surface-tile-h-card);
  filter: var(--batik-surface-filter-light);
  pointer-events: none;
}

.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--batik-footer-opacity);
  background-image: var(--batik-tribal-tile);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto var(--batik-footer-tile-h);
  filter: none;
  pointer-events: none;
}

.site-footer .footer-container {
  position: relative;
  z-index: 1;
}

.cta-dark,
.mkt-cta-band,
.mkt-block--dark {
  position: relative;
  overflow: hidden;
}

/* ——— Grid cards: equal height per row (hub strip, solusi, brand, …) ——— */
.home-hub-strip-grid,
.solutions-grid,
.core-solutions-grid,
.brand-hub-grid,
.positioning-pillars-grid,
.procurement-grid {
  align-items: stretch;
}

.solutions-grid>.solution-card-rich,
.solutions-grid>.solution-card,
.solutions-grid>a.solution-card-rich,
.solutions-grid>a.solution-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.solution-card-rich>p,
.solution-card.solution-card-rich>p,
.solution-card>p {
  flex: 1 1 auto;
}

.solution-card-rich .card-cta,
.solution-card .card-cta {
  margin-top: auto;
}

.brand-hub-grid>.brand-hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.brand-hub-card-intro {
  flex: 1 1 auto;
}

.brand-hub-card-cta {
  margin-top: auto;
}

/* Hub layanan/produk: konten di atas motif batik, teks tidak terklip */
.layanan-hub-item {
  overflow: visible;
}

.layanan-hub-link,
.layanan-hub-body,
.layanan-hub-title {
  position: relative;
  z-index: 1;
}