/* =========================================================
   INNOVESIA — Design System & Site Styles
   Palette: Blue & White. Plain CSS, no build step required.
   ========================================================= */

:root{
  /* --- Brand palette (blue & white, tech-forward) --- */
  --c-primary: #155EEF;
  --c-primary-600: #0F4CD1;
  --c-primary-700: #0B3FA8;
  --c-primary-200: #C7D9FF;
  --c-primary-100: #E6EEFF;
  --c-primary-50: #F3F7FF;
  --c-cyan: #06B6D4;
  --c-cyan-100: #CFFAFE;
  --c-navy: #081B3F;
  --c-navy-950: #050D1F;
  --c-navy-700: #0F2A5C;
  --c-navy-600: #163A78;
  --c-white: #FFFFFF;
  --c-ink: #0B1324;
  --c-body: #45516E;
  --c-muted: #7382A3;
  --c-border: #E3E9F7;
  --c-border-strong: #C9D6F2;
  --c-bg-soft: #F5F8FF;
  --c-success: #1AA36B;
  --c-warning: #F59E0B;
  --c-danger: #E64848;
  --grad-tech: linear-gradient(135deg, #2E8FFF 0%, #155EEF 45%, #06B6D4 100%);
  --grad-tech-deep: linear-gradient(120deg, var(--c-navy-700) 0%, var(--c-primary) 60%, #0891B2 100%);

  /* --- Homepage v2 (guide-matched hero/CTA identity: deep royal-blue gradient,
     bright cyan headline accent, near-black footer) --- */
  --grad-hero: linear-gradient(135deg, #2F49F3 0%, #14239C 55%, #0A1042 100%);
  --c-cyan-bright: #6FD6FF;
  --c-black: #090B12;
  --c-pink: #FF4FA3;
  /* Insightika sub-brand — deliberately its own black/red/yellow identity, distinct
     from Innovesia's blue, since it's a separate Gen-Z media brand. */
  --insight-red: #E4222C;
  --insight-red-dim: #B01A22;
  --insight-yellow: #F7D716;
  --insight-bg: #920000;

  /* --- Type scale --- one typeface everywhere: Google Sans (loaded in layouts/app.blade.php
     via Google Fonts), with the platform system-font stack as fallback only for the brief
     moment before it loads or on the rare chance it fails. Every text role on the site
     (heading, body, mono/eyebrow, brand) resolves through this single token. --- */
  --font-base: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-base);
  --font-mono: var(--font-base);
  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3.375rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.1vw, 2.375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  /* --- Layout --- */
  --container: 1180px;
  --container-wide: 1320px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(8,27,63,0.06), 0 1px 1px rgba(8,27,63,0.04);
  --shadow-md: 0 8px 24px rgba(11,63,168,0.10);
  --shadow-lg: 0 20px 48px rgba(8,27,63,0.16);
  --shadow-glow: 0 12px 32px rgba(21,94,239,.16), 0 0 0 1px rgba(21,94,239,.07);
  --header-h: 72px;
}

/* --- Reset --- */
*, *::before, *::after{ box-sizing:border-box; }
body{
  margin:0;
  padding-top:var(--header-h); /* header is position:fixed now — reserve its space by default */
  font-family:var(--font-base);
  color:var(--c-ink);
  background:var(--c-white);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
h1,h2,h3,h4{ color:var(--c-ink); line-height:1.2; font-weight:700; font-family:var(--font-display); letter-spacing:-0.01em; }
svg{ display:block; }
.mono{ font-family:var(--font-mono); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* --- Skip link (a11y) --- */
.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--c-primary); color:#fff; padding:10px 16px;
  border-radius:var(--radius-sm); z-index:1000; font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }

/* --- Utility --- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container-wide{ width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:24px; }
.section{ padding-block: clamp(48px, 6vw, 96px); }
.section-tight{ padding-block: clamp(32px, 4vw, 56px); }
.section--soft{ background:var(--c-bg-soft); }
.section--navy{ background:var(--c-navy); color:#fff; }
.text-center{ text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--c-primary-100); color:var(--c-primary-700);
  font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:7px 14px 7px 12px; border-radius:var(--radius-sm); margin-bottom:16px; border:1px solid rgba(21,94,239,.12);
}
.section--navy .eyebrow{ background:rgba(255,255,255,.08); color:#7DD3FC; border-color:rgba(255,255,255,.14); }
.section-head{ max-width:720px; margin-bottom:40px; }
.section-head.text-center{ margin-inline:auto; }
.section-head p{ color:var(--c-body); font-size:var(--fs-lead); margin-top:14px; }
.section--navy .section-head p{ color:#B9C6EA; }

/* Small pulsing "status" dot — used before a hero eyebrow to read as a live system indicator */
.status-dot{
  width:7px; height:7px; border-radius:50%; background:var(--c-cyan); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(6,182,212,.6); animation:status-pulse 2s ease-out infinite;
}
.section--navy .status-dot, .hero-tech .status-dot{ background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,.6); }
@keyframes status-pulse{
  0%{ box-shadow:0 0 0 0 rgba(6,182,212,.55); }
  70%{ box-shadow:0 0 0 7px rgba(6,182,212,0); }
  100%{ box-shadow:0 0 0 0 rgba(6,182,212,0); }
}

/* Tech-tag: compact monospace label for capability/category chips (less "soft" than a pill) */
.tag-mono{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--c-primary-700); background:var(--c-primary-100);
  padding:4px 10px; border-radius:6px;
}

mark{
  background:none; position:relative; padding:0 .1em;
  background-image:var(--grad-tech); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* --- Buttons --- */
/* Border-radius standardized site-wide to --radius-md (14px) — same value as the
   Insightika logo chip — instead of the old fully-pill shape, per explicit request
   to unify button corner rounding across every element. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:.95rem; border-radius:var(--radius-md);
  padding:13px 26px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--c-primary); color:#fff; box-shadow:var(--shadow-md); }
.btn-primary:hover{ background:var(--c-primary-600); }
.btn-outline{ background:transparent; color:var(--c-primary); border-color:var(--c-border-strong); }
.btn-outline:hover{ border-color:var(--c-primary); background:var(--c-primary-50); }
.btn-ghost{ background:transparent; color:var(--c-ink); }
.btn-ghost:hover{ background:var(--c-bg-soft); }
.btn-white{ background:#fff; color:var(--c-primary-700); }
.btn-white:hover{ background:var(--c-primary-50); }
/* Secondary button for dark backgrounds (e.g. next to .btn-white in a
   .cta-banner) — outline only, so it doesn't compete with the solid white CTA. */
.btn-outline-white{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline-white:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn-sm{ padding:9px 18px; font-size:.875rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--c-border);
  height:var(--header-h);
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav{ position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:24px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--c-ink); flex-shrink:0; letter-spacing:-0.01em; }
.brand svg{ flex-shrink:0; }
/* logo-full.png menaruh ikon mark di atas dan wordmark "innovesia" di bawah
   dalam satu file — ikon jauh lebih tinggi (nyaris penuh tinggi kanvas)
   daripada wordmark (cuma separuh bawah), jadi titik tengah vertikal FILE-nya
   condong ke ikon, bukan ke teks. align-items:center pada .nav akhirnya
   menengahkan ikon, bukan kata "innovesia", terhadap teks menu di
   sampingnya. Digeser naik supaya wordmark-nya yang sejajar dengan teks
   menu (offset dihitung dari bounding box asli file: pusat teks ada di
   ~71.6% tinggi file, bukan 50%). */
.brand-logo{ height:30px; width:auto; flex-shrink:0; transform:translateY(-6px); }
.brand-icon{ height:32px; width:auto; flex-shrink:0; }

/* --- Transparent-over-hero header: pages with a full-bleed hero (body.has-hero) start
   with a transparent header + white nav text, then solidify to the normal white header
   once scrolled past the hero (body.header-solid, toggled by main.js). --- */
body.has-hero{ padding-top:0; }
body.has-hero .site-header{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; }
body.has-hero .nav-link{ color:#fff; }
/* BUG NYATA DITEMUKAN 2026-09-15 (dilaporkan user via screenshot: teks
   "Produk & Layanan" jadi putih/nyaris tak kelihatan saat dropdown-nya
   dibuka di beranda): dulu cuma :hover yang ikut di-putihkan di sini —
   [aria-expanded="true"] (state dropdown TERBUKA, beda dari :hover) tidak
   ikut disebut, jadi jatuh ke aturan dasar `color:#fff` di atas TANPA
   background putih transparan-nya. Sementara itu `.nav-link[aria-expanded
   ="true"]` generik (di bawah, non-hero) tetap mengubah BACKGROUND jadi
   var(--c-primary-50) — pastel nyaris putih. Hasilnya: teks putih di atas
   latar nyaris putih = tidak terbaca. Ditambahkan di sini supaya klik
   (aria-expanded) dapat treatment sama seperti hover: putih di atas latar
   putih transparan (rgba), bukan latar pastel terang. */
body.has-hero .nav-link:hover, body.has-hero .nav-link[aria-expanded="true"]{ color:#fff; background:rgba(255,255,255,.14); }
body.has-hero .lang-switch{ color:#fff; }
body.has-hero .lang-switch:hover{ color:#fff; }
body.has-hero .lang-switch .chev{ color:rgba(255,255,255,.7); }
body.has-hero .nav-actions .btn-primary{ background:#fff; color:var(--c-primary-700); box-shadow:none; }
body.has-hero .nav-actions .btn-primary:hover{ background:#EEF3FF; }
body.has-hero .nav-toggle{ border-color:rgba(255,255,255,.45); background:transparent; }
body.has-hero .nav-toggle span, body.has-hero .nav-toggle span::before, body.has-hero .nav-toggle span::after{ background:#fff; }
body.has-hero .logo-on-light{ display:none; }
body.has-hero .logo-on-dark{ display:block; }

body.has-hero.header-solid .site-header{ background:rgba(255,255,255,.92); border-bottom-color:var(--c-border); backdrop-filter:saturate(180%) blur(10px); }
body.has-hero.header-solid .nav-link{ color:var(--c-ink); }
body.has-hero.header-solid .nav-link:hover{ color:var(--c-primary); background:var(--c-primary-50); }
body.has-hero.header-solid .lang-switch{ color:var(--c-body); }
body.has-hero.header-solid .lang-switch .chev{ color:var(--c-muted); }
body.has-hero.header-solid .nav-actions .btn-primary{ background:var(--c-primary); color:#fff; box-shadow:var(--shadow-md); }
body.has-hero.header-solid .nav-actions .btn-primary:hover{ background:var(--c-primary-600); }
body.has-hero.header-solid .nav-toggle{ border-color:var(--c-border); background:#fff; }
body.has-hero.header-solid .nav-toggle span, body.has-hero.header-solid .nav-toggle span::before, body.has-hero.header-solid .nav-toggle span::after{ background:var(--c-ink); }
body.has-hero.header-solid .logo-on-light{ display:block; }
body.has-hero.header-solid .logo-on-dark{ display:none; }
.logo-on-dark{ display:none; } /* hidden by default; shown only in the transparent-over-hero state above */
.nav-links{ display:flex; align-items:center; gap:4px; flex:1; }
.nav-links > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:var(--radius-sm);
  font-weight:600; font-size:.95rem; color:var(--c-ink);
  background:none; border:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color .15s ease, background .15s ease;
}
.nav-link:hover, .nav-link[aria-expanded="true"]{ color:var(--c-primary); background:var(--c-primary-50); }
.nav-link:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
.nav-link .chev{ transition:transform .15s ease; }
.nav-link[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.dropdown{
  /* 2026-09-17: dulu top:calc(100% + 10px) — ada jarak 10px kelihatan
     "mengambang" antara nav bar dan panel dropdown (per arahan eksplisit
     user "buat nempel ke menu navigasi"). Sekarang top:100% persis, panel
     langsung menempel di tepi bawah trigger-nya, tanpa celah. */
  position:absolute; top:100%; left:50%; min-width:520px; z-index:60;
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:12px; opacity:0; visibility:hidden; transform:translate(-50%,6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  /* The header is position:fixed, so a dropdown taller than the viewport doesn't
     become reachable by scrolling the page — its bottom is just permanently cut
     off. Cap it to the visible space below the header and let it scroll instead. */
  max-height:calc(100vh - var(--header-h) - 24px); overflow-y:auto;
}
/* Centered under its own trigger (not left-anchored) so a wide dropdown never bleeds
   sideways under neighboring nav labels — the bug the "tertutup putih" screenshot showed. */
.nav-item.is-open .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
/* A 680px mega dropdown centered on a small trigger word near the left of the bar
   (e.g. "Produk") pushes its own left edge past the viewport edge — confirmed at a
   plain 1280px window, not just narrow screens. Fix: mega dropdowns center on the
   full nav bar instead of their own tiny <li>, which is always wide enough to hold
   them with room either side. Plain (non-mega) dropdowns keep centering on their
   own trigger, since they're narrow enough to never need this. */
.nav-links > li:has(.dropdown--mega){ position:static; }
.dropdown-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }
@media (max-width:960px){ .dropdown{ min-width:0; } .dropdown-grid{ grid-template-columns:1fr; } }

/* Mega-menu variant: a plain icon+name+description list in a 2-column grid under a
   small-caps section label with a trailing rule — same shape for every mega dropdown
   (Produk/Layanan/Cerita Dampak), matching the reference layout exactly. No product
   screenshot/dashboard mockup panel. */
.dropdown--mega{
  min-width:680px; display:grid; gap:6px 22px;
  grid-template-columns:1fr; grid-template-areas:"list" "foot";
}
.dropdown--mega .dropdown-grid{ grid-area:list; grid-template-columns:1fr 1fr; gap:4px 24px; }
.dropdown--mega .dropdown-foot{ grid-area:foot; }
.dropdown-section-label{
  grid-column:1/-1; display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-muted); margin:2px 0 8px;
}
.dropdown-section-label::after{ content:""; flex:1; height:1px; background:var(--c-border); }
@media (max-width:960px){
  .dropdown--mega{ min-width:0; }
  .dropdown--mega .dropdown-grid{ grid-template-columns:1fr; }
}

/* Combined Produk+Layanan menu — three regions side by side (Layanan/Produk/Enterprise),
   matching the reference exactly. Overrides .dropdown--mega's single-block padding with
   its own per-column padding + dividers instead. */
.dropdown--combined{
  /* Produk (9 item, 2 kolom) dan Layanan (8 item, 2 kolom) sekarang butuh lebar
     yang sama-sama lega; Enterprise tetap kartu tunggal yang lebih sempit. */
  min-width:980px; padding:0; display:grid; grid-template-columns:1.5fr 1.5fr 1fr;
}
.dropdown-col{ padding:16px; }
.dropdown-col--layanan{ border-right:1px solid var(--c-border); }
.dropdown-col--produk{ border-right:1px solid var(--c-border); }
/* 2026-09-17 (revisi ke-3, per arahan eksplisit "card birunya buat center,
   dan radiusnya terapkan di semua, agar terlihat rapih"): revisi ke-2
   sempat bikin card "bleed" nempel ke tepi kanan/kiri/bawah dengan 1 sudut
   dibuat siku (kiri-bawah) — hasilnya malah terasa tidak rapi/tidak
   seimbang. Sekarang kembali ke padding SAMA RATA di semua sisi kolom
   (card jadi center, punya jarak seimbang kiri-kanan-atas-bawah dari tepi
   panel), dan border-radius card diterapkan penuh di ke-4 sudut. Tint
   pucat kolom tetap dihapus (transparan/putih) sesuai arahan sebelumnya. */
.dropdown-col--enterprise{
  border-radius:0 var(--radius-md) var(--radius-md) 0; padding:16px;
  display:flex; flex-direction:column;
}
/* card diberi flex:1 supaya tingginya mengikuti kolom Produk/Layanan yang
   lebih tinggi (bukan cuma setinggi kontennya sendiri). */
.dropdown-col--enterprise .dropdown-enterprise-card{
  flex:1; margin:0; border-radius:var(--radius-md);
}
.dropdown-grid--single{ grid-template-columns:1fr !important; }
/* 2026-09-17: background diganti gradient gelap (var(--grad-hero) — gradient
   CTA yang sama dipakai di .cta-banner/.icc-final-cta di seluruh situs)
   per arahan eksplisit "warna backgorund card ini coba kamu atur lagi, agar
   terlihat semakin premium" — sebelumnya putih polos, terasa datar di
   antara dua kolom Produk/Layanan yang juga putih. Radial glow halus +
   shadow biru dipakai supaya konsisten dengan pola "premium dark card"
   yang sudah ada (lihat .icc-final-cta), bukan gaya baru yang asing. */
.dropdown-enterprise-card{
  display:flex; flex-direction:column; gap:10px; text-decoration:none;
  background:var(--grad-hero); color:#fff; border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md); padding:16px; position:relative; overflow:hidden;
  box-shadow:0 10px 28px rgba(8,27,63,.22);
  transition:box-shadow .15s ease, transform .15s ease;
}
.dropdown-enterprise-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 100% 0%, rgba(111,214,255,.22) 0%, transparent 55%);
}
.dropdown-enterprise-card > *{ position:relative; z-index:1; }
.dropdown-enterprise-card:hover{ box-shadow:var(--shadow-glow), 0 14px 34px rgba(8,27,63,.28); transform:translateY(-2px); }
.dec-brand{ display:flex; align-items:center; gap:10px; }
.dec-brand img{ display:block; flex-shrink:0; width:120px; height:auto; }
/* 2026-09-17: background gold dipertahankan (kontras kuat & konsisten di
   latar apa pun) — sebelumnya biru muda (var(--c-primary-100)) sebelum
   diganti gold; sekarang badge ini berada di atas card gelap, masih
   terbaca jelas karena warnanya solid/pill, tidak transparan. */
/* 2026-09-17: margin-top kecil untuk kompensasi — file logo-full-white.png
   menyertakan ikon pin yang "ekor"-nya menjorok ke bawah, jadi bounding-box
   gambar (dipakai align-items:center pada .dec-brand) pusatnya lebih tinggi
   dari pusat visual tulisan "innovesia" itu sendiri. Tanpa kompensasi ini,
   badge ENTERPRISE terlihat menempel ke bagian atas logo, bukan sejajar
   dengan tulisannya — per arahan eksplisit "box tulisan enterprise belum
   centre dengan logo". Nilai diukur presisi dari bounding-box asli logo. */
.dec-suite{
  font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.06em;
  color:#7A5200; background:#F6C744; padding:2px 8px; border-radius:var(--radius-pill);
  margin-top:12px;
}
.dropdown-enterprise-card p{ font-size:.82rem; color:rgba(255,255,255,.78); line-height:1.5; margin:0; }
.dec-link{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--c-cyan-bright); }
/* 2026-09-17: bingkai putih ditambahkan di belakang foto tim per arahan
   eksplisit "beri warna putih di belakang gambar orang ini" — foto jadi
   terasa seperti dipasang di atas matting putih (gaya polaroid/premium),
   bukan menempel langsung ke gradient biru card. */
.dec-photo-frame{ background:#fff; padding:6px; border-radius:var(--radius-sm); margin-top:2px; }
.dec-photo{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:6px; display:block; }
/* Narrow-desktop safety net: between the 960px mobile-nav switch and a genuinely
   comfortable width for three side-by-side regions, drop Layanan to one sub-column
   so the whole thing can shrink instead of overflowing the viewport. */
@media (max-width:1150px){
  .dropdown--combined{ min-width:0; }
  .dropdown-col--layanan .dropdown-grid,
  .dropdown-col--produk .dropdown-grid{ grid-template-columns:1fr; }
}
@media (max-width:960px){
  .dropdown--combined{ grid-template-columns:1fr; }
  .dropdown-col--layanan, .dropdown-col--produk{ border-right:none; border-bottom:1px solid var(--c-border); }
  .dropdown-col--enterprise{ border-radius:0; }
}
.dropdown-link{
  display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:var(--radius-sm);
  /* Tanpa ini, tap di layar sentuh menampilkan kotak highlight biru/abu-abu
     bawaan browser yang lebih besar dari badge ikon (2026-09-15) — bentrok
     dengan warna pastel badge ikon baru, kelihatan seperti "bug warna" kotak
     dobel yang tidak sejajar. .nav-link di atas sudah punya baris yang sama;
     .dropdown-link belum, sampai sekarang. */
  -webkit-tap-highlight-color:transparent;
}
.dropdown-link:hover, .dropdown-link:focus-visible{ background:var(--c-bg-soft); }
/* Icon + name only, no description — a denser single-line row than the default
   icon+name+description item above. */
.dropdown-grid--compact .dropdown-link{ align-items:center; }
.dropdown-grid--compact .dropdown-link strong{ font-size:.88rem; line-height:1.2; }
/* 2026-09-17: badge ikon di dropdown "Produk Kami"/"Layanan Kami" (satu-satunya
   dropdown yang pakai .dropdown-grid--compact) per arahan eksplisit user —
   background diganti putih polos (bukan pastel warna-warni yang dibuat
   sebelumnya, khusus DI SINI saja, bukan di kartu beranda/katalog/hero yang
   masih pakai warna), ikon diperbesar lagi, dan dipastikan benar-benar
   center (padding merata + flex center eksplisit, bukan cuma
   default object-fit:contain). Border sedikit lebih tegas dari border tipis
   .ic--icon-logo biasa (rgba(11,19,36,.08) → var(--c-border)) supaya badge
   putih ini tetap kelihatan di atas latar dropdown yang juga putih — tanpa
   ini akan "hilang" menyatu seperti bug kontras yang pernah diperbaiki
   sebelumnya. Selector 3-tingkat (.dropdown-grid--compact .dropdown-link
   .ic.ic--icon-logo) sengaja dipakai supaya menang lawan ".ic.ic--icon-logo"
   generik tanpa perlu !important, dan TIDAK memengaruhi badge ikon produk/
   layanan di tempat lain (yang masih perlu warna pastel-nya). */
.dropdown-grid--compact .dropdown-link .ic{ width:56px; height:56px; border-radius:14px; }
.dropdown-grid--compact .dropdown-link .ic.ic--icon-logo{
  background:#fff; border:1px solid var(--c-border); padding:11px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}
.dropdown-grid--compact .dropdown-link .ic.ic--icon-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.dropdown-link .ic{
  width:42px; height:42px; border-radius:12px; background:var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
/* .ic--icon-logo: badge produk yang thumbnail-nya logo ikon 3D transparan
   (2026-09-15, lihat 'thumb_style'/'thumb_bg' di config/innovesia.php) —
   sebelumnya object-fit:cover bikin ikonnya memenuhi seluruh kotak 42px
   (kelihatan lebih "penuh"/besar dibanding badge SVG lama seperti Website
   Impact, yang glyph-nya cuma 18px mengambang di tengah kotak berwarna).
   Sekarang dikecilkan lewat padding+object-fit:contain, ukurannya jadi
   sepadan dengan badge SVG. Warna latar dari --icon-bg (di-set inline per
   produk) — pakai warna pastel yang sama dengan kartu beranda, bukan biru
   default .ic, sesuai arahan eksplisit "sesuaikan dengan warna di halaman
   beranda". Kotak (.ic.ic--icon-logo, 2 kelas) & gambar (.ic.ic--icon-logo
   img) sengaja 2-kelas biar spesifisitasnya menang atas ".dropdown-link .ic"
   dan ".ic img" di atas, apa pun urutan sumbernya. */
.ic.ic--icon-logo{
  background:var(--icon-bg, var(--c-primary)); padding:8px; box-sizing:border-box;
  /* 2026-09-15: sebagian warna pastel (mis. biru muda Media Intelligence
     Analytics, #DCEBFF) sangat dekat dengan warna hover baris menu
     (--c-bg-soft, #F5F8FF) — begitu di-hover, badge-nya kelihatan "menyatu"/
     hilang jadi putih karena kontrasnya nyaris nol. Garis tepi tipis ini
     memberi batas yang selalu terlihat apa pun warna latar di sekitarnya. */
  border:1px solid rgba(11,19,36,.08);
}
.ic.ic--icon-logo img{ object-fit:contain; }
/* One distinct color per product/service — the same palette used everywhere an
   icon badge for one of them shows up (nav dropdown, /product cards, homepage
   tiles), so each one is recognizable by its color+icon no matter where it
   appears. Each rule lists every context it needs to win in — a bare ".ic--x"
   would lose to that context's own base rule (".dropdown-link .ic",
   ".product-card .ic", etc. all set their own default background), which is
   exactly what silently made every icon render the same color before. */
.dropdown-link .ic--mia, .product-card .ic--mia, .tile-thumb.ic--mia, .bundle-ic.ic--mia, .product-hero-ic.ic--mia{ background:var(--c-primary); }
.dropdown-link .ic--rcc, .product-card .ic--rcc, .tile-thumb.ic--rcc, .bundle-ic.ic--rcc, .product-hero-ic.ic--rcc{ background:#0EA5E9; }
.dropdown-link .ic--tracker, .product-card .ic--tracker, .tile-thumb.ic--tracker, .bundle-ic.ic--tracker, .product-hero-ic.ic--tracker{ background:var(--c-navy); }
.dropdown-link .ic--tower, .product-card .ic--tower, .tile-thumb.ic--tower, .bundle-ic.ic--tower, .product-hero-ic.ic--tower, .milestone-blob.ic--tower, .milestone-main-ic.ic--tower{ background:var(--c-success); }
.dropdown-link .ic--consulting, .product-card .ic--consulting, .tile-thumb.ic--consulting, .bundle-ic.ic--consulting, .product-hero-ic.ic--consulting, .milestone-blob.ic--consulting, .milestone-main-ic.ic--consulting{ background:var(--c-primary-700); }
.dropdown-link .ic--brand, .product-card .ic--brand, .tile-thumb.ic--brand, .bundle-ic.ic--brand, .product-hero-ic.ic--brand, .milestone-blob.ic--brand, .milestone-main-ic.ic--brand{ background:var(--c-pink); }
.dropdown-link .ic--research, .product-card .ic--research, .tile-thumb.ic--research, .bundle-ic.ic--research, .product-hero-ic.ic--research, .milestone-blob.ic--research, .milestone-main-ic.ic--research{ background:#7C5CFF; }
.dropdown-link .ic--pmo, .product-card .ic--pmo, .tile-thumb.ic--pmo, .bundle-ic.ic--pmo, .product-hero-ic.ic--pmo, .milestone-blob.ic--pmo, .milestone-main-ic.ic--pmo{ background:#0891B2; }
.dropdown-link .ic--workshop, .product-card .ic--workshop, .tile-thumb.ic--workshop, .bundle-ic.ic--workshop, .product-hero-ic.ic--workshop{ background:#F59E0B; }
.dropdown-link .ic--training, .product-card .ic--training, .tile-thumb.ic--training, .bundle-ic.ic--training, .product-hero-ic.ic--training{ background:var(--c-primary); }
.dropdown-link .ic--radarpotensi, .product-card .ic--radarpotensi, .tile-thumb.ic--radarpotensi, .bundle-ic.ic--radarpotensi, .product-hero-ic.ic--radarpotensi, .milestone-blob.ic--radarpotensi, .milestone-main-ic.ic--radarpotensi{ background:#D97706; }
.product-hero-ic{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-inline:auto; color:#fff; overflow:hidden; }
/* Badge diisi thumbnail gambar produk (aset baru, 2026-09-06) alih-alih ikon SVG
   untuk produk yang sudah punya 'thumb' — dipakai persis sama di ketiga tempat
   (dropdown nav, kartu beranda, hero halaman produk) via config/innovesia.php. */
.ic img, .tile-thumb img, .product-hero-ic img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.product-hero-illustration{ width:100%; max-width:640px; height:auto; border-radius:var(--radius-lg); margin-top:28px; }
.dropdown-link strong{ display:block; font-size:.9rem; }
.dropdown-link span{ display:block; font-size:.8rem; color:var(--c-muted); margin-top:2px; }
.dropdown-foot{ border-top:1px solid var(--c-border); margin-top:8px; padding:10px 12px 4px; font-size:.8rem; }
.dropdown-foot a{ color:var(--c-primary); font-weight:700; }

.nav-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-actions .signin{ font-weight:700; font-size:.9rem; padding:10px 12px; color:var(--c-body); }
.nav-actions .signin:hover{ color:var(--c-primary); }
.lang-switch{
  display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
  font-weight:700; font-size:.9rem; color:var(--c-body); padding:10px 8px;
}
.lang-switch:hover{ color:var(--c-ink); }
.lang-switch .chev{ color:var(--c-muted); }
.flag-icon{ border-radius:2px; flex-shrink:0; display:block; }
/* Bahasa default situs sekarang Inggris (lihat applyLang di main.js), jadi
   bendera Inggris yang tampil di rest-state (sebelum JS jalan / body belum
   dapat class), bendera ID baru tampil kalau body.lang-id eksplisit. */
.flag-icon--id{ display:none; }
body.lang-id .flag-icon--id{ display:block; }
body.lang-id .flag-icon--en{ display:none; }
/* 2026-09-17: rule "sembunyikan lang-switch di mobile" DIHAPUS per arahan
   eksplisit user ("button id/en pastikan juga ada di mobile") — tombol
   ID/EN sekarang tetap tampil di header mobile, bukan cuma di dalam menu
   flyout. (Dulu ada baris `@media (max-width:960px){ .lang-switch{
   display:none; } }` di sini.) */
.nav-toggle{
  display:none; width:40px; height:40px; border:1px solid var(--c-border); border-radius:10px;
  background:#fff; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--c-ink); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:rotate(45deg); top:0; }
.nav-toggle[aria-expanded="true"] span::after{ transform:rotate(-45deg); top:0; }

@media (max-width:960px){
  .nav-links{
    position:fixed; top:var(--header-h); left:0; right:0; height:calc(100vh - var(--header-h));
    background:#fff; flex-direction:column; align-items:stretch;
    padding:16px; overflow:auto; gap:2px; transform:translateX(100%); transition:transform .25s ease;
    box-shadow:var(--shadow-lg);
  }
  body.nav-open .nav-links{ transform:translateX(0); }
  /* Lock background scroll while the mobile flyout is open — otherwise the fixed
     header/flyout let the page scroll underneath them, showing hero content bleeding
     through the semi-transparent header. */
  body.nav-open{ overflow:hidden; }
  .nav-link{ width:100%; justify-content:space-between; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none;
    max-height:0; overflow:hidden; padding:0; transition:max-height .2s ease; }
  /* Explicit transform:none here — without it this rule's equal-specificity match
     with the desktop ".nav-item.is-open .dropdown{transform:translate(-50%,0)}" rule
     (elsewhere in this file) loses to source order and the mobile flyout content
     renders shifted ~50% off-screen to the left when a dropdown opens. */
  .nav-item.is-open .dropdown{ max-height:600px; padding:6px 0 10px; transform:none; }
  /* The combined Produk+Layanan menu stacks to a single column here (13 items +
     an Enterprise card) — way past the 600px cap above, which was silently
     clipping everything after "Layanan Kami" and hiding Produk/Enterprise
     entirely. Give it room proportional to what it actually contains. */
  .nav-item.is-open .dropdown--combined{ max-height:2800px; }
  .nav-actions .signin{ display:none; }
  .nav-toggle{ display:flex; }
  /* 2026-09-17, per arahan eksplisit user ("button hubungi kami mobile
     ganti dengan icon contact saja"): teks "Hubungi Kami"/"Contact Us"
     disembunyikan, tombol jadi bulat ikon-saja — hemat ruang di header
     mobile yang sekarang juga menampilkan tombol ID/EN (lihat di atas). */
  .nav-actions .btn-primary{ padding:10px; gap:0; }
  .nav-actions .btn-primary span{ display:none; }
  /* the open mobile flyout is always solid white — even on a transparent/has-hero header */
  body.has-hero .nav-links .nav-link{ color:var(--c-ink); }
  body.has-hero .nav-links .nav-link:hover{ color:var(--c-primary); background:var(--c-primary-50); }
}

/* =========================================================
   HERO
   ========================================================= */
/* .hero (bukan .hero-v2 beranda) hanya dipakai di halaman yang breadcrumb-nya
   muncul tepat di atasnya (Kontak, Cerita Dampak) — padding-top dibuat kecil
   supaya judul tidak jauh dari breadcrumb "Beranda / ...", tidak seperti
   sebelumnya yang jaraknya nyaris 100px. */
.hero{ padding-top:clamp(20px,3vw,32px); padding-bottom:clamp(40px,6vw,80px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.hero h1{ font-size:var(--fs-h1); letter-spacing:-0.02em; }
.hero .lead{ font-size:var(--fs-lead); color:var(--c-body); margin-top:18px; max-width:56ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-checks{ display:grid; gap:10px; margin-top:22px; }
.hero-checks li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.95rem; }
.hero-checks .ic-check{ color:var(--c-success); flex-shrink:0; }
.hero-visual{ position:relative; }
.hero.text-center .hero-grid{ display:block; }
.hero.text-center h1{ max-width:820px; margin-inline:auto; }
.hero.text-center .lead{ margin-inline:auto; }
.hero.text-center .hero-actions{ justify-content:center; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
}

/* --- Dark "tech" hero variant: grid texture + soft glow blobs, used on the homepage
   and product pages so Innovesia reads as a data/engineering company, not a generic SaaS --- */
.hero-tech{
  position:relative; overflow:hidden; background:var(--c-navy); color:#fff;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-tech::before{
  content:""; position:absolute; width:620px; height:620px; border-radius:50%; top:-260px; right:-160px;
  background:radial-gradient(circle, rgba(21,94,239,.45), transparent 70%); filter:blur(10px); pointer-events:none;
}
.hero-tech::after{
  content:""; position:absolute; width:480px; height:480px; border-radius:50%; bottom:-260px; left:-160px;
  background:radial-gradient(circle, rgba(6,182,212,.28), transparent 70%); filter:blur(10px); pointer-events:none;
}
.hero-tech .container, .hero-tech .hero-grid{ position:relative; z-index:1; }
.hero-tech h1{ color:#fff; }
.hero-tech .lead{ color:#B9C6EA; }
.hero-tech .hero-checks li{ color:#DCE7FF; }
.hero-tech .hero-checks .ic-check{ color:#34D399; }
.hero-tech .rating-row .rtext{ color:#B9C6EA; }
.hero-tech .btn-outline{ color:#fff; border-color:rgba(255,255,255,.28); }
.hero-tech .btn-outline:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

/* --- Rating row --- */
.rating-row{ display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.stars{ display:flex; gap:2px; color:var(--c-warning); }
.rating-row .rtext{ font-size:.875rem; color:var(--c-body); font-weight:600; }

/* --- Trust logos --- */
.trustbar{ padding-block:32px; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.trustbar p{ text-align:center; font-family:var(--font-mono); font-size:.78rem; color:var(--c-muted); font-weight:600; margin-bottom:22px; text-transform:uppercase; letter-spacing:.08em; }
.trustbar-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(20px,5vw,52px); }
.trustbar-logos .logo-chip{
  display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:600; color:var(--c-muted);
  font-size:.85rem; letter-spacing:.02em; opacity:.75; transition:opacity .15s ease, color .15s ease;
}
.trustbar-logos .logo-chip:hover{ opacity:1; color:var(--c-primary-700); }

/* =========================================================
   CARDS / GRIDS
   ========================================================= */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  padding:28px; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover{ box-shadow:var(--shadow-glow); border-color:var(--c-primary-100); transform:translateY(-2px); }

.product-card{ position:relative; }
.product-card .ic{
  width:52px; height:52px; border-radius:var(--radius-md); background:var(--grad-tech); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.product-card h3{ font-size:1.1rem; margin-bottom:6px; }
.product-card .tag-mono{ margin-bottom:10px; }
.product-card p{ color:var(--c-body); font-size:.9rem; }
.product-card .arrow{
  margin-top:18px; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--c-border);
  display:flex; align-items:center; justify-content:center; color:var(--c-primary);
  transition:background .2s ease, border-color .2s ease;
}
.product-card:hover .arrow{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.badge-soon{
  position:absolute; top:24px; right:24px; background:var(--c-bg-soft); color:var(--c-muted);
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; padding:4px 10px; border-radius:6px; border:1px solid var(--c-border);
  text-transform:uppercase; letter-spacing:.03em;
}
.product-card.is-soon{ opacity:.72; }
.product-card.is-soon:hover{ transform:none; box-shadow:none; }

.value-card{ text-align:left; }
.value-card .ic{ width:46px; height:46px; border-radius:12px; background:var(--grad-tech); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }

/* Methodology cards (About → "Pendekatan Innovesia") — icon-circle + copy, with a
   small flat decorative accent at the bottom instead of a photo/illustration. */
.approach-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.approach-card{ background:var(--c-bg-soft); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; }
.approach-ic{
  width:44px; height:44px; border-radius:50%; background:var(--c-primary-100); color:var(--c-primary-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex-shrink:0;
}
.approach-card h3{ font-size:1rem; margin-bottom:8px; }
.approach-card p{ font-size:.85rem; color:var(--c-body); line-height:1.6; }
.approach-deco{ display:flex; align-items:flex-end; gap:5px; height:26px; margin-top:20px; }
.approach-deco span{ width:9px; border-radius:3px 3px 0 0; background:var(--c-primary-200); }
.approach-deco span:nth-child(1){ height:40%; }
.approach-deco span:nth-child(2){ height:100%; background:var(--c-primary); }
.approach-deco span:nth-child(3){ height:65%; }
@media (max-width:640px){ .approach-cards{ grid-template-columns:1fr; } }
/* .approach-cards--3: dipakai di section "Cara Kerja" (product-detail.blade.php,
   2026-09-08) — alurnya 3 langkah, jadi 3 kolom rata di desktop, bukan 2+1
   yang timpang seperti grid default .approach-cards. */
.approach-cards--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .approach-cards--3{ grid-template-columns:1fr; } }

/* =========================================================
   MIA STORY-SELLING PAGE (product-mia.blade.php, 2026-09-08)
   Halaman story-selling khusus Media Intelligence Analytics — bukan template
   generik. Semua screenshot dashboard yang dirujuk di sini ASLI dari demo
   live (miademo.netlify.app), bukan mockup. Lihat catatan di config/innovesia.php.
   ========================================================= */

/* --- 01 Hero: dua kolom, copy + screenshot dashboard asli --- */
.mia-hero{ padding-block:clamp(40px,6vw,72px) clamp(24px,4vw,40px); background:linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%); }
.mia-hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.mia-hero-copy h1{ margin-top:14px; }
.mia-hero-copy .lead{ margin-top:16px; max-width:52ch; }
.mia-hero-visual img{ width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
@media (max-width:860px){ .mia-hero-grid{ grid-template-columns:1fr; gap:28px; } .mia-hero-visual{ order:-1; } }

/* --- 02 The Reality: funnel Ribuan Mentions → ... → Segelintir Signal --- */
.mia-funnel{ margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:6px; max-width:520px; margin-inline:auto; }
.mia-funnel-step{
  width:100%; text-align:center; font-weight:700; padding:14px 20px; border-radius:var(--radius-md);
  background:#fff; border:1px solid var(--c-border); box-shadow:var(--shadow-sm);
}
.mia-funnel-step:last-child{ background:var(--grad-tech); color:#fff; border-color:transparent; box-shadow:var(--shadow-glow); }
.mia-funnel-arrow{ color:var(--c-primary-200); }

/* --- 03 The Question: daftar pertanyaan analis --- */
.mia-questions{ margin-top:28px; display:grid; gap:12px; }
.mia-question{ display:flex; align-items:flex-start; gap:14px; background:var(--c-bg-soft); border-radius:var(--radius-md); padding:16px 18px; }
.mia-question p{ font-weight:600; color:var(--c-ink); }
.mia-question-mark{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--c-primary-100); color:var(--c-primary-700);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem;
}

/* --- 04 The Transformation: raw -> engine -> actionable --- */
.mia-transform{ margin-top:32px; display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; }
.mia-transform-col{ background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:24px; }
.mia-transform-col--out{ border-color:var(--c-primary-200); background:var(--c-primary-50); }
.mia-transform-label{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--c-muted); }
.mia-transform-col ul{ margin-top:14px; display:grid; gap:10px; }
.mia-transform-col li{ font-size:.92rem; color:var(--c-body); padding-left:16px; position:relative; }
.mia-transform-col li::before{ content:"—"; position:absolute; left:0; color:var(--c-primary); }
.mia-transform-col--out li{ color:var(--c-ink); font-weight:600; }
.mia-transform-engine{
  display:flex; flex-direction:column; align-items:center; gap:8px; width:120px; height:120px; border-radius:50%;
  background:var(--grad-tech); color:#fff; justify-content:center; text-align:center; font-size:.78rem; font-weight:700;
  box-shadow:var(--shadow-glow); padding:8px;
}
@media (max-width:860px){
  .mia-transform{ grid-template-columns:1fr; justify-items:center; }
  .mia-transform-engine{ transform:rotate(90deg); }
  .mia-transform-engine span{ transform:rotate(-90deg); }
}

/* --- 06 Show, Don't Tell: screenshot asli + callout beranotasi ---
   Badge nomor di atas gambar cuma penunjuk visual (bukan pembawa teks —
   hover-only text tidak ramah di touchscreen/aksesibilitas); teks lengkap tiap
   callout ada di legend list di bawah gambar (.mia-legend), selalu terlihat
   di semua device. */
.mia-annotated{ position:relative; max-width:960px; margin:32px auto 0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.mia-annotated img{ width:100%; height:auto; display:block; }
.mia-callout-num{
  position:absolute; transform:translate(-50%,-50%); flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--c-primary); color:#fff; font-weight:800; font-size:.78rem;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(255,255,255,.9), var(--shadow-md);
}
.mia-legend{ max-width:960px; margin:20px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.mia-legend-item{ display:flex; align-items:flex-start; gap:12px; font-size:.9rem; color:var(--c-body); }
.mia-legend-num{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--c-primary-100); color:var(--c-primary-700);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.72rem; margin-top:1px;
}
@media (max-width:700px){ .mia-legend{ grid-template-columns:1fr; } }

/* --- 07 One Issue, Many Regions --- */
.mia-regional-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.mia-regional-bars{ display:grid; gap:14px; background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:24px; }
.mia-regional-row{ display:grid; grid-template-columns:110px 1fr 48px; align-items:center; gap:12px; }
.mia-regional-label{ font-size:.85rem; font-weight:600; color:var(--c-ink); }
.mia-regional-track{ height:8px; border-radius:var(--radius-pill); background:var(--c-bg-soft); overflow:hidden; }
.mia-regional-fill{ height:100%; border-radius:var(--radius-pill); background:var(--grad-tech); }
.mia-regional-value{ font-size:.8rem; font-weight:700; color:var(--c-muted); text-align:right; }
@media (max-width:860px){ .mia-regional-grid{ grid-template-columns:1fr; gap:24px; } }

/* --- 08 The Momentum --- */
.mia-momentum-points{ margin-top:8px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin-inline:auto; }
.mia-momentum-point{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 12px; background:#fff;
  border:1px solid var(--c-border); border-radius:var(--radius-md); color:var(--c-primary); font-size:.85rem; font-weight:600;
}
.mia-momentum-point span{ color:var(--c-ink); }
@media (max-width:700px){ .mia-momentum-points{ grid-template-columns:1fr 1fr; } }

/* --- 10 Trust / Proof stat bar --- */
.mia-stats{ margin-top:24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:820px; margin-inline:auto; }
.mia-stat{ display:flex; flex-direction:column; gap:4px; }
.mia-stat-value{ font-size:clamp(1.6rem,1.3rem+1vw,2.2rem); font-weight:800; color:var(--c-primary-700); font-family:var(--font-mono); }
.mia-stat-label{ font-size:.8rem; color:var(--c-muted); font-weight:600; }
@media (max-width:700px){ .mia-stats{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   BUSINESS POTENTIAL RADAR STORY PAGE
   (product-business-potential-radar.blade.php, 2026-09-15)
   Halaman story-selling khusus, dibangun mengikuti referensi desain yang
   diberikan user. Screenshot yang dirujuk di sini ASLI dari demo live
   (yskab-investment.ai.studio), bukan mockup — pola yang sama dengan MIA.
   ========================================================= */

/* .story-crumb-bg: latar breadcrumb untuk halaman story-selling custom (MIA,
   Business Potential Radar) — 2026-09-15, per arahan eksplisit "jangan ada
   putih sisa" di atas hero. Warnanya sama persis dengan titik AWAL gradient
   hero di bawahnya (--c-bg-soft), jadi breadcrumb menyambung mulus ke hero
   tanpa garis putih di antaranya. */
.story-crumb-bg{ background:var(--c-bg-soft); }

/* --- Hero: dua kolom, copy + screenshot dashboard asli --- */
.bpr-hero{ padding-block:clamp(28px,5vw,52px) clamp(24px,4vw,40px); background:linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%); }
.bpr-hero-grid{ display:grid; grid-template-columns:.92fr 1.2fr; gap:48px; align-items:center; }
/* .bpr-hero-icon: logo ikon 3D produk di kiri atas judul — 2026-09-16 per
   arahan eksplisit "taruh kecil saja di atas title, dibuat di kiri", lalu
   2026-09-17 diperbesar lagi per arahan eksplisit user ("icon produk ini
   coba perbesar ukurannya") — dari 52px jadi 76px. Dipakai di SEMUA 4
   halaman story-selling (product-mia/product-business-potential-radar/
   product-government-program-tracker/product-military-command-center) —
   class SATU INI dipakai bersama oleh keempatnya, jadi ubah di sini
   otomatis konsisten di semua halaman, tidak perlu diulang per file.
   Warna latar dari --icon-bg (di-set inline per produk, sama seperti
   .ic--icon-logo di nav/kartu beranda) supaya konsisten dengan badge ikon
   produk di tempat lain, bukan warna acak baru. */
.bpr-hero-icon{
  width:76px; height:76px; border-radius:20px; padding:14px; box-sizing:border-box;
  background:var(--icon-bg, var(--c-primary)); border:1px solid rgba(11,19,36,.08);
  display:flex; align-items:center; justify-content:center;
}
.bpr-hero-icon img{ width:100%; height:100%; object-fit:contain; }
.bpr-hero-copy h1{ margin-top:16px; }
.bpr-hero-tagline{ font-weight:700; font-size:1.1rem; color:var(--c-ink); margin-top:12px; }
.bpr-hero-copy .lead{ margin-top:14px; max-width:56ch; }
.bpr-trust-row{ margin-top:22px; display:flex; flex-wrap:wrap; gap:16px 24px; }
.bpr-trust-item{ display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; color:var(--c-body); }
.bpr-trust-item svg{ color:var(--c-success); flex-shrink:0; }
@media (max-width:860px){ .bpr-hero-grid{ grid-template-columns:1fr; gap:28px; } .bpr-hero-visual{ order:-1; } }
/* 2026-09-17: gambar hero TANPA .story-device-frame (LMS/Information Control
   Tower — asetnya PNG transparan, bukan screenshot rectangular, lihat
   catatan di masing-masing blade) juga diberi radius yang sama per arahan
   "setiap gambar berikan radius" — konsisten dengan .story-device-frame
   (16px) & .bpr-overview-grid img, walau untuk aset bentuk tidak beraturan
   efeknya nyaris tidak terlihat (sudut kotaknya memang sudah transparan). */
.bpr-hero-visual > img{ border-radius:16px; }

/* --- .story-device-frame: mockup "jendela browser" (dots merah/kuning/hijau
   ala macOS) membungkus screenshot asli — 2026-09-15, per arahan eksplisit
   "tambahkan seperti berada di dalam frame laptop atau tablet". Dipakai di
   hero & section visualisasi Business Potential Radar (bisa dipakai ulang di
   halaman story-selling lain juga, makanya prefix generik "story-" bukan
   "bpr-"). --- */
.story-device-frame{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--c-border); background:#fff; }
.story-device-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#EEF1F8; border-bottom:1px solid var(--c-border); }
.story-device-bar span{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.story-device-bar span:nth-child(1){ background:#FF5F57; }
.story-device-bar span:nth-child(2){ background:#FEBC2E; }
.story-device-bar span:nth-child(3){ background:#28C840; }
.story-device-frame img{ display:block; width:100%; height:auto; }

/* --- Overview: teks + ilustrasi tumpukan layer (aset dari user, lihat
   'layers_illustration_image' di config/innovesia.php) berdampingan 2 kolom,
   gambar di kanan (2026-09-15, per arahan eksplisit). --- */
.bpr-overview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
/* 2026-09-17: border-radius ditambahkan per arahan eksplisit user ("setiap
   gambar berikan radius, agar lebih rapih") — sebelumnya gambar Overview
   di semua halaman story-selling (MIA/GPT/BPR/LMS/Information Control
   Tower) persegi tajam, beda dengan .story-device-frame yang sudah
   16px sejak awal. Disamakan ke 16px yang sama supaya konsisten. */
.bpr-overview-grid img{ width:100%; height:auto; border-radius:16px; }
@media (max-width:860px){ .bpr-overview-grid{ grid-template-columns:1fr; gap:28px; } }

/* --- Visualization: section soft-blue, copy+checklist+CTA / screenshot --- */
.bpr-viz{ background:var(--c-primary-50); }
.bpr-viz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.bpr-viz-checklist{ margin-top:18px; display:grid; gap:10px; }
.bpr-viz-checklist li{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--c-body); font-weight:600; }
.bpr-viz-checklist svg{ color:var(--c-success); flex-shrink:0; margin-top:2px; }
/* .bpr-viz-visual sekarang menampung 2 screenshot berdampingan (2026-09-15,
   arahan eksplisit "buat dua capture") — masing-masing dibungkus
   .story-device-frame sendiri, disusun dalam kolom vertikal supaya keduanya
   tetap terbaca jelas meski section-nya cuma separuh lebar halaman. */
.bpr-viz-visual{ display:grid; gap:16px; }
@media (max-width:860px){ .bpr-viz-grid{ grid-template-columns:1fr; gap:28px; } .bpr-viz-visual{ order:-1; } }

/* --- Audience: grid 5 kolom --- */
.bpr-audience-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:1100px){ .bpr-audience-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .bpr-audience-grid{ grid-template-columns:1fr 1fr; } }
.bpr-audience-card{ background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-md); padding:20px 16px; text-align:left; }
.bpr-audience-card .ic{ width:36px; height:36px; border-radius:10px; background:var(--c-primary-100); color:var(--c-primary-700); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.bpr-audience-card h3{ font-size:.92rem; margin-bottom:6px; }
.bpr-audience-card p{ font-size:.82rem; color:var(--c-body); line-height:1.5; }

/* --- Perjalanan Kami (Tentang Kami) — grid kartu flat, vibe yang sama
   dengan "Metodologi Kami" (.approach-card) tepat di atasnya: kartu latar
   lembut + ikon bulat + judul + deskripsi + aksen bar kecil di bawah.
   Ikonnya sekarang benar-benar reuse .approach-ic apa adanya (lingkaran biru
   muda + warna primer, sama seperti kartu "Design Thinking"/"Insightism")
   per arahan eksplisit — sebelumnya tiap milestone punya warna sendiri
   (pelangi lewat compound selector .milestone-main-ic.ic--X), sekarang satu
   skema warna konsisten; cuma di-tengahkan (align-self:center) karena di
   .approach-card aslinya rata kiri, sementara di sini diminta center. */
.milestone-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.milestone-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:24px;
  display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.milestone-card:hover{ box-shadow:var(--shadow-glow); border-color:var(--c-primary-100); transform:translateY(-2px); }
.milestone-card .approach-ic{ align-self:center; }
.milestone-card .milestone-year{ display:block; font-family:var(--font-display); font-weight:800; color:var(--c-primary); font-size:.92rem; }
.milestone-card h3{ font-size:1rem; margin-top:4px; margin-bottom:8px; }
.milestone-card p{ font-size:.85rem; color:var(--c-body); line-height:1.6; }
.milestone-card .approach-deco{ margin-top:auto; padding-top:20px; }
@media (max-width:860px){ .milestone-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .milestone-cards{ grid-template-columns:1fr; } }

/* Real team headshots (from the migrated company dataset) — photo tile + name/role. */
.team-card{ text-align:left; padding:20px; }
.team-card .team-photo{ width:100%; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; margin-bottom:16px; background:var(--c-bg-soft); }
.team-card .team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Team carousel (About → "The Minds Behind the Innovation") — grayscale until
   hover, same treatment as the client-logo trust bar for a consistent feel.
   Lebar kartu dihitung via calc() (bukan px tetap) supaya PERSIS 5 kartu
   (jumlah anggota tim published saat ini) muat utuh di dalam .container
   (80px = 4 gap × 20px dari .tile-track), apa pun lebar viewport-nya, dan
   tepi kiri/kanannya tetap sejajar batas .container yang sama dengan
   section lain. Kalau anggota ke-6 nanti ditambah, clamp(150px,...) jadi
   batas bawah supaya kartu tidak menyusut berlebihan — carousel-nya
   otomatis aktif lagi (geser) begitu itu terjadi. */
.team-card-h{ flex:0 0 clamp(150px, calc((100% - 80px) / 5), 280px); scroll-snap-align:start; text-decoration:none; color:inherit; display:block; }
.team-card-h-photo{ aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden; background:var(--c-bg-soft); margin-bottom:14px; }
.team-card-h-photo img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; filter:grayscale(1); transition:filter .2s ease; }
.team-card-h:hover .team-card-h-photo img{ filter:grayscale(0); }
.team-card-h h4{ font-size:1.05rem; margin-bottom:4px; }
/* Jabatan tanpa "box" pill (dulu .tag-mono) — teks polos supaya terasa lebih
   profesional, bukan seperti badge/tag. */
.team-card-h-role{ display:block; font-size:.85rem; color:var(--c-muted); }
.team-card-h{ cursor:pointer; }
/* 2026-09-17: kartu tim sementara tidak bisa diklik (aset profil belum
   lengkap) — lihat $teamCardMode di about.blade.php. Batalkan cursor
   pointer & efek hover-angkat kartu (.card:hover kalau ada) supaya tidak
   terlihat seperti bisa diklik; warna foto tetap boleh berubah dari abu-abu
   saat hover (detail visual kecil, tidak menyiratkan interaktivitas). */
.team-card-h--static{ cursor:default; }

/* --- Member modal (pop-up) — "The Minds Behind the Innovation" di halaman
   Tentang Kami: klik kartu tim membuka pop-up profil (foto + bio), bukan
   pindah ke halaman lain — 2026-09-16, per arahan eksplisit + referensi
   desain (screenshot) yang diberikan user. Markup & JS-nya di
   resources/views/pages/about.blade.php. Tidak ada icon sosial media
   (LinkedIn/Instagram/WhatsApp) di sini per arahan eksplisit — situs ini
   tidak punya URL sosial media pribadi anggota tim yang nyata di mana pun,
   jadi sengaja tidak ditambahkan/dikarang. --- */
.member-modal-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(11,19,36,.55); backdrop-filter:blur(2px);
}
.member-modal-overlay[hidden]{ display:none; }
.member-modal{
  position:relative; width:100%; max-width:920px; max-height:calc(100vh - 48px); overflow-y:auto;
  background:var(--c-bg-soft); border:1px solid var(--c-border); border-radius:28px;
  box-shadow:var(--shadow-lg); padding:clamp(24px,4vw,48px);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,48px); align-items:start;
}
.member-modal-photo{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1; background:#fff; }
.member-modal-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* .member-modal-eyebrow: TIDAK dipakai lagi 2026-09-16 (eyebrow "Tentang
   Saya"/"About Me" dihapus per arahan eksplisit — langsung ke nama), aturan
   ini dibiarkan ada kalau-kalau dipakai lagi nanti. h3 sekarang elemen
   PERTAMA di .member-modal-body (bukan lagi setelah eyebrow), jadi
   margin-top-nya dihapus supaya sejajar rapi dengan foto di sebelahnya. */
.member-modal-eyebrow{ font-family:var(--font-mono); font-weight:700; font-size:.8rem; letter-spacing:.08em; color:var(--c-primary); text-transform:uppercase; }
.member-modal-body h3{ margin-top:0; font-size:clamp(1.6rem,3vw,2.2rem); }
.member-modal-body h3 .member-modal-dot{ color:var(--c-primary); }
.member-modal-bio{ margin-top:18px; display:grid; gap:14px; }
.member-modal-bio p{ color:var(--c-body); line-height:1.7; }
.member-modal-bio strong{ color:var(--c-ink); font-weight:700; }
.member-modal-actions{ margin-top:24px; }
.member-modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  background:#fff; border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--c-ink); transition:background .15s ease; padding:0;
}
.member-modal-close:hover{ background:var(--c-border); }
@media (max-width:720px){
  .member-modal{ grid-template-columns:1fr; padding:24px; }
  .member-modal-photo{ max-width:220px; margin-inline:auto; }
  .member-modal-close{ top:12px; right:12px; }
}

.team-card h3{ font-size:1.05rem; margin-bottom:4px; }
.team-card .tag-mono{ display:inline-block; }
.value-card h3{ font-size:1.05rem; margin-bottom:8px; }
.value-card p{ color:var(--c-body); font-size:.9rem; }

/* Corner-bracket "scan frame" accent — wrap a .mock-window or visual with this for a signature tech touch */
.frame-corners{ position:relative; }
.frame-corners::before, .frame-corners::after{
  content:""; position:absolute; width:20px; height:20px; border-color:var(--c-cyan); border-style:solid; z-index:2; pointer-events:none;
}
.frame-corners::before{ top:-10px; left:-10px; border-width:2px 0 0 2px; border-top-left-radius:4px; }
.frame-corners::after{ bottom:-10px; right:-10px; border-width:0 2px 2px 0; border-bottom-right-radius:4px; }

/* =========================================================
   FEATURE (zig-zag) SECTIONS
   ========================================================= */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.feature-row + .feature-row{ margin-top:clamp(48px,7vw,96px); }
.feature-row.reverse .feature-copy{ order:2; }
.feature-copy .step-num{
  display:inline-flex; width:32px; height:32px; border-radius:50%; background:var(--c-primary-100); color:var(--c-primary-700);
  align-items:center; justify-content:center; font-weight:800; font-size:.85rem; margin-bottom:16px;
}
.feature-copy h3{ font-size:var(--fs-h3); margin-bottom:12px; }
.feature-copy p{ color:var(--c-body); }
.feature-copy ul{ margin-top:18px; display:grid; gap:10px; }
.feature-copy ul li{ display:flex; gap:10px; font-size:.95rem; }
.feature-copy ul li .ic-check{ color:var(--c-success); flex-shrink:0; margin-top:2px; }
.feature-copy .btn{ margin-top:22px; }
@media (max-width:860px){
  .feature-row{ grid-template-columns:1fr; gap:28px; }
  .feature-row.reverse .feature-copy{ order:0; }
}

/* --- About page header illustration — aset asli (peta Indonesia + titik
   lokasi + kartu insight, sudah berwarna biru sendiri), ditampilkan sebagai
   gambar biasa (bukan mask siluet lagi seperti aset polos sebelumnya).
   Dipakai lewat slot illustration di <x-page-header illustrationAlign="center">.
   Diposisikan absolute dengan right:0 (nempel ke tepi kanan
   .page-header-illustration, yang sudah sejajar dengan batas kanan konten
   lain lewat fix di bawah), vertikal ditengahkan. Selector digandakan
   (.page-header-illustration .about-header-map) supaya menang lawan
   ".page-header-illustration img{width:100%}" — lihat catatan yang sama di
   .about-header-mark sebelumnya. */
.page-header-illustration .about-header-map{
  position:absolute; z-index:0; right:0; top:50%; transform:translateY(-50%);
  width:460px; max-width:60vw; height:auto; pointer-events:none;
}

/* --- Client Snapshot (Tentang Kami) — logo klien real dikelompokkan per
   kategori institusi, gaya pill label + grid logo grayscale, mengikuti
   referensi yang diberikan. */
.client-cat-group{ margin-top:40px; }
.client-cat-group:first-of-type{ margin-top:8px; }
.client-cat-pill{
  display:block; width:fit-content; margin:0 auto 22px; background:var(--c-navy); color:#fff;
  font-weight:700; font-size:.82rem; letter-spacing:.02em; padding:8px 22px; border-radius:999px;
}
.client-cat-logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px 36px; }
.client-cat-logos img{
  height:30px; width:auto; max-width:110px; object-fit:contain;
  filter:grayscale(1); opacity:.65; transition:filter .15s ease, opacity .15s ease;
}
.client-cat-logos img:hover{ filter:grayscale(0); opacity:1; }
@media (max-width:640px){ .client-cat-logos{ gap:18px 24px; } .client-cat-logos img{ height:24px; } }

/* --- Karier hero — dua kolom: judul+CTA di kiri dengan bentuk dekoratif lembut
   di belakangnya, kartu quote founder besar di kanan dengan foto asli yang
   menjorok ke tepi kartu. Menggantikan hero+quote yang tadinya dua section
   terpisah, sesuai referensi layout yang diberikan. */
.career-hero{ position:relative; overflow:hidden; padding-block:clamp(48px,6vw,80px); }
.career-hero-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center; position:relative; z-index:1; }
.career-hero-copy h1{ font-size:clamp(2.4rem,5vw,3.4rem); line-height:1.05; }
.career-hero-title-a, .career-hero-title-b{ display:block; }
.career-hero-title-a{ color:var(--c-navy); }
.career-hero-title-b{ color:var(--c-primary); }
.career-hero-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:28px; }
.career-hero-actions .btn{ min-width:230px; justify-content:space-between; }

/* Ambient shapes — purely decorative (aria-hidden), faint brand-blue tint. Live
   in their own reserved-height box, in normal flow right after the CTAs
   (not absolutely positioned against the whole section), so they always sit
   in the empty space below the buttons and stay inside the copy column's own
   width — never overlapping the heading/paragraph or spilling past the
   container into the page's side margin. */
.career-hero-deco{ position:relative; height:88px; margin-top:12px; }
.career-hero-shape{ position:absolute; pointer-events:none; z-index:0; }
.career-hero-shape--ring{ width:80px; height:80px; border-radius:50%; border:14px solid var(--c-primary-100); left:0; top:0; }
.career-hero-shape--dot{ width:34px; height:34px; border-radius:50%; background:var(--c-primary-100); left:56px; top:52px; opacity:.8; }
.career-hero-shape--tri{
  width:0; height:0; border-left:26px solid transparent; border-right:26px solid transparent;
  border-bottom:44px solid var(--c-primary-100); opacity:.55; left:96px; top:26px; transform:rotate(10deg);
}
@media (max-width:860px){ .career-hero-deco{ display:none; } }

/* Quote card — glow/dot circles live in the WRAP (overflow:visible), behind the
   card (z-index), so they peek out past its edges instead of being hidden
   under the card's own overflow:hidden (needed to clip the photo/gradient). */
.career-quote-card-wrap{ position:relative; }
.career-quote-card{
  position:relative; z-index:1; overflow:hidden; border-radius:28px; padding:48px 44px; min-height:420px;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(135deg, #EEF3FF 0%, #F8FAFF 100%); box-shadow:var(--shadow-lg);
}
.career-quote-mark{ position:relative; z-index:1; font-family:var(--font-display); font-size:3.4rem; color:var(--c-primary); line-height:1; }
.career-quote-text{ position:relative; z-index:1; font-size:1.35rem; font-weight:700; line-height:1.4; color:var(--c-ink); max-width:56%; margin-top:8px; }
.career-quote-text .accent{ color:var(--c-primary); }
.career-quote-divider{ position:relative; z-index:1; display:block; width:44px; height:3px; background:var(--c-primary); border-radius:2px; margin:24px 0 16px; }
.career-quote-author{ position:relative; z-index:1; }
.career-quote-author strong{ display:block; font-size:1.02rem; }
.career-quote-author span{ color:var(--c-muted); font-size:.88rem; }
.career-quote-photo{ position:absolute; right:0; bottom:0; height:100%; width:42%; z-index:1; }
.career-quote-photo img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; filter:grayscale(1); }
.career-quote-photo-glow{ position:absolute; top:-30px; right:14%; width:150px; height:150px; border-radius:50%; background:rgba(21,94,239,.16); z-index:0; }
.career-quote-photo-dot{ position:absolute; bottom:-32px; right:-30px; width:160px; height:160px; border-radius:50%; background:var(--c-primary); z-index:0; }
@media (max-width:960px){
  .career-hero-grid{ grid-template-columns:1fr; }
  .career-quote-card{ min-height:auto; padding:32px 24px 24px; }
  .career-quote-text{ max-width:100%; }
  .career-quote-photo{ position:relative; width:100%; height:220px; right:auto; bottom:auto; margin-top:20px; border-radius:16px; overflow:hidden; }
  .career-quote-photo-glow, .career-quote-photo-dot{ display:none; }
}

/* Karier — Proses Rekrutmen (kiri) & Lowongan (kanan) side by side. */
.career-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:860px){ .career-split{ grid-template-columns:1fr; gap:40px; } }

/* Vertical step list (replaces the horizontal .timeline-h in this narrower
   column) — numbered circle + connecting line down to the next step. */
.career-steps-v{ position:relative; margin-top:28px; }
.career-step-v{ position:relative; display:flex; gap:16px; padding-bottom:28px; }
.career-step-v:last-child{ padding-bottom:0; }
.career-step-v::before{
  content:''; position:absolute; left:19px; top:40px; bottom:0; width:2px; background:var(--c-border);
}
.career-step-v:last-child::before{ display:none; }
.career-step-v-num{
  position:relative; z-index:1; flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--c-primary); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem;
}
.career-step-v h3{ font-size:1rem; margin-bottom:4px; }
.career-step-v p{ color:var(--c-body); font-size:.9rem; }
/* Aksen dekoratif di bawah langkah rekrutmen (bukan foto) — gradasi biru brand
   dengan lingkaran translusen bertumpuk dan logo mark yang mengambang halus,
   dipakai buat sekadar mengisi ruang kosong kolom kiri dengan rapi. */
.career-accent{
  margin-top:32px; position:relative; overflow:hidden; border-radius:var(--radius-lg);
  min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:32px; text-align:center; background:var(--grad-hero);
}
.career-accent-shape{ position:absolute; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; }
.career-accent-shape--1{ width:180px; height:180px; top:-60px; right:-40px; }
.career-accent-shape--2{ width:130px; height:130px; bottom:-50px; left:-30px; background:rgba(255,255,255,.06); }
.career-accent-shape--3{ width:60px; height:60px; bottom:26px; right:48px; background:rgba(255,255,255,.12); }
.career-accent-mark{ position:relative; z-index:1; width:48px; height:auto; animation:about-mark-float 4.5s ease-in-out infinite; }
.career-accent-text{ position:relative; z-index:1; color:#fff; font-weight:600; font-size:1.05rem; max-width:26ch; line-height:1.4; }
@media (prefers-reduced-motion:reduce){ .career-accent-mark{ animation:none; } }

/* --- Mock browser / device frame for illustrative screenshots --- */
.mock-window{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.mock-window .mock-bar{ display:flex; align-items:center; gap:6px; padding:12px 16px; background:var(--c-bg-soft); border-bottom:1px solid var(--c-border); }
.mock-window .mock-bar span{ width:9px; height:9px; border-radius:50%; background:var(--c-border-strong); flex-shrink:0; }
.mock-window .mock-bar .bar-label{
  margin-left:8px; font-family:var(--font-mono); font-size:.72rem; color:var(--c-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.mock-window .mock-body{ padding:22px; }

/* Dark "terminal" variant — used on hero-tech sections so the mockup reads as a live system, not a plain screenshot */
.mock-window--dark{ background:var(--c-navy-950); border-color:rgba(255,255,255,.1); }
.mock-window--dark .mock-bar{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
.mock-window--dark .mock-bar span{ background:rgba(255,255,255,.18); }
.mock-window--dark .mock-bar .bar-label{ color:rgba(255,255,255,.4); }
.mock-window--dark .mock-body{ color:#E7ECFA; }

/* =========================================================
   TESTIMONIAL CARDS + CAROUSEL — generic, reused by the homepage
   "Kepercayaan Klien" section (see HOMEPAGE V2 below).
   ========================================================= */
/* Grid 3-kolom tetap (bukan flex-scroll lagi) — persis 3 testimoni yang ada
   selalu tampil utuh sekaligus, tanpa terpotong/perlu digeser. .t-card jadi
   flex-column dengan .who didorong ke bawah (margin-top:auto) supaya
   nama+jabatan SEJAJAR antar kartu meski panjang kutipannya beda-beda. */
.testimonial-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.t-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:26px;
}
.t-card p{ color:var(--c-ink); font-size:.98rem; }
.t-card .who{ display:flex; align-items:flex-start; gap:12px; margin-top:auto; padding-top:18px; }
@media (max-width:900px){ .testimonial-strip{ grid-template-columns:1fr; } }
.t-card .avatar{ width:42px; height:42px; border-radius:50%; background:var(--c-primary-100); color:var(--c-primary-700); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
/* Logo perusahaan (bukan lagi inisial nama) — kotak putih dengan sedikit
   padding & border tipis, bukan lingkaran berwarna, supaya logo apa pun
   bentuknya (persegi panjang, lingkaran, dst) tetap terlihat rapi dan tidak
   terpotong. object-fit:contain menjaga rasio asli tiap logo. */
.t-card .avatar--logo{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-sm); padding:6px;
}
.t-card .avatar--logo img{ width:100%; height:100%; object-fit:contain; display:block; }
/* Foto asli narasumber testimoni (2026-09-09) — lingkaran penuh dengan
   object-fit:cover, beda dari .avatar--logo (kotak, contain, untuk logo
   perusahaan) karena ini foto orang, bukan logo. */
.t-card .avatar--photo{ background:var(--c-bg-soft); }
.t-card .avatar--photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.t-card .who strong{ display:block; font-size:.9rem; line-height:1.3; }
/* 2026-09-09: role/jabatan bisa panjang & wrap 2 baris (mis. "Kepala
   Pengembangan Organisasi & Pembelajaran, Shell Mobility Indonesia") —
   line-height default body (1.6) bikin jarak antar-baris jadi kelewat
   lebar untuk teks caption sekecil ini. Dirapatkan ke 1.3, dan avatar
   di .who di atas diubah ke align-items:flex-start supaya foto sejajar
   rata atas dengan nama, bukan "melayang" di tengah blok 3 baris
   (nama + 2 baris jabatan) saat jabatannya panjang. */
.t-card .who span{ display:block; font-size:.8rem; line-height:1.3; color:var(--c-muted); margin-top:2px; }
.carousel-controls{ display:flex; gap:10px; justify-content:center; margin-top:20px; }
.carousel-controls button{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--c-border); background:#fff; color:var(--c-primary);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.carousel-controls button:hover{ background:var(--c-primary-50); }

/* Distandarisasi ke satu warna+gradasi di semua halaman: SAMA PERSIS dengan
   header band biru (var(--grad-hero), lihat .page-header/.about-hero-hero
   yang dipakai Kontak/Cerita Dampak/Tentang Kami), bukan lagi flat
   var(--c-primary) — biar terasa satu identitas visual yang sama di
   seluruh situs, bukan dua nuansa biru yang beda. Latar SENGAJA polos —
   aksen geometris (lingkaran opacity + kotak miring) yang tadinya di sini
   dibuang per arahan eksplisit, cuma warna gradasi saja, tanpa dekorasi.
   Karena ini satu rule bersama untuk SEMUA .cta-banner di situs, ubah di
   sini otomatis konsisten di setiap halaman yang memakainya (beranda,
   about, our-work, karier, product-detail, service-detail, dst). */
.cta-banner{
  position:relative; overflow:hidden;
  background:var(--grad-hero);
  color:#fff; border-radius:var(--radius-xl); padding:clamp(32px,5vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ color:#fff; font-size:var(--fs-h3); max-width:32ch; }
.cta-banner p{ color:#B9C6EA; margin-top:8px; max-width:44ch; }
.cta-banner .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cta-banner .btn-white{ border-radius:var(--radius-md); padding:15px 30px; }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-group h3{ font-size:1.05rem; margin:32px 0 14px; }
.faq-group:first-child h3{ margin-top:0; }
.faq-item{ border-bottom:1px solid var(--c-border); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:18px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:700; font-size:.98rem; color:var(--c-ink);
}
.faq-q .plus{ flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background:var(--c-primary); border-radius:2px;
}
.faq-q .plus::before{ width:14px; height:2px; top:10px; left:4px; }
.faq-q .plus::after{ width:2px; height:14px; top:4px; left:10px; transition:transform .2s ease; }
.faq-item.is-open .faq-q .plus::after{ transform:rotate(90deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a p, .faq-a div{ padding:0 4px 18px; color:var(--c-body); font-size:.95rem; }
.faq-item.is-open .faq-a{ max-height:400px; }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.78rem; color:var(--c-muted); padding-top:20px; }
.breadcrumb a:hover{ color:var(--c-primary); }
.breadcrumb .sep{ opacity:.5; }

/* --- Page header band — <x-page-header>, dipakai di Kontak/Cerita Dampak/
   Produk & Layanan supaya tiap halaman punya ruang header yang jelas begitu
   masuk, gaya referensi yang diberikan tapi warna biru brand (sama gradasi
   dengan hero beranda), plus logo mark translusen + bentuk dekoratif lembut. */
.page-header{
  position:relative; overflow:hidden; background:var(--grad-hero); color:#fff;
  padding-bottom:clamp(40px,6vw,64px);
}
.page-header-breadcrumb{ position:relative; z-index:1; color:rgba(255,255,255,.6); padding-top:24px; }
.page-header-breadcrumb a{ color:rgba(255,255,255,.85); }
.page-header-breadcrumb a:hover{ color:#fff; }
.page-header-copy{ position:relative; z-index:1; max-width:640px; margin-top:28px; }
.page-header-eyebrow{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.24); }
.page-header-copy h1{ color:#fff; font-size:var(--fs-h1); letter-spacing:-0.02em; margin-top:14px; }
.page-header-copy .lead{ color:#B9C6EA; margin-top:14px; }
.page-header-shape{ position:absolute; z-index:0; border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none; }
.page-header-shape--1{ width:340px; height:340px; top:-140px; right:-60px; }
.page-header-shape--2{ width:200px; height:200px; bottom:-110px; right:22%; background:rgba(255,255,255,.05); }
.page-header-mark{
  position:absolute; z-index:0; right:6%; top:50%; transform:translateY(-50%);
  width:170px; opacity:.14; pointer-events:none;
}
/* Ilustrasi custom (slot illustration) — lebih terlihat/opaque dibanding mark
   translusen default karena ini elemen konten (aset asli, bukan dekorasi).
   .page-header-illustration-frame memakai class .container yang sama
   (max-width + padding-inline + margin-inline:auto) tapi diregangkan penuh
   (inset:0) ke tinggi section, supaya tepi kanan ilustrasi persis sejajar
   dengan padding kanan breadcrumb/judul di container lain, dan bisa ditempel
   ke tepi bawah section (bottom:0) yang sesungguhnya. */
.page-header-illustration-frame{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* right:24px (bukan 0) — containing block elemen absolute itu "padding edge"
   ancestor-nya, yang sejajar tepi LUAR frame (sebelum padding-inline:24px
   milik .container dikurangi), bukan tepi konten yang dipakai breadcrumb/
   judul. Kalau dibiarkan right:0, ilustrasi selalu melebihi batas kanan
   konten sebesar padding itu (24px) — makin kentara di aset yang kontennya
   sudah pas di tepi file (Cerita Dampak, Tentang Kami). 24px di sini sengaja
   disamakan dengan angka padding-inline .container di atas. */
.page-header-illustration{ position:absolute; right:24px; }
/* --bottom: buat ilustrasi "adegan" yang punya referensi lantai/meja (Kontak,
   Cerita Dampak) — ditempel ke tepi bawah section yang sesungguhnya.
   --center: buat grafik abstrak tanpa referensi "tanah" (Tentang Kami) —
   ditengahkan vertikal seperti mark translusen default. */
.page-header-illustration--bottom{ bottom:0; width:min(440px,44%); }
.page-header-illustration--center{ top:50%; transform:translateY(-50%); width:min(360px,36%); }
.page-header-illustration svg, .page-header-illustration img{ width:100%; height:auto; display:block; }
@media (max-width:760px){
  .page-header-mark{ width:110px; }
  .page-header-shape--1{ width:220px; height:220px; }
  .page-header-illustration-frame{ display:none; }
}

/* =========================================================
   PRICING
   ========================================================= */
.plan-toggle{ display:flex; align-items:center; justify-content:center; gap:14px; margin:28px 0 48px; }
.switch{ position:relative; width:52px; height:30px; background:var(--c-border-strong); border-radius:var(--radius-pill); border:none; cursor:pointer; flex-shrink:0; }
.switch::after{ content:""; position:absolute; width:24px; height:24px; background:#fff; border-radius:50%; top:3px; left:3px; box-shadow:var(--shadow-sm); transition:transform .2s ease; }
.switch[aria-checked="true"]{ background:var(--c-primary); }
.switch[aria-checked="true"]::after{ transform:translateX(22px); }
.save-tag{ background:var(--c-primary-100); color:var(--c-primary-700); font-size:.75rem; font-weight:800; padding:3px 10px; border-radius:var(--radius-pill); }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }
.plan{ background:#fff; border:1.5px solid var(--c-border); border-radius:var(--radius-lg); padding:32px; display:flex; flex-direction:column; }
.plan.is-highlight{ border-color:var(--c-primary); box-shadow:var(--shadow-lg); position:relative; transform:scale(1.02); }
.plan-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--c-primary); color:#fff; font-size:.75rem; font-weight:800; padding:5px 16px; border-radius:var(--radius-pill); }
.plan h3{ font-size:1.15rem; }
.plan .plan-desc{ color:var(--c-body); font-size:.875rem; margin-top:6px; min-height:38px; }
.plan .price{ font-family:var(--font-mono); font-size:1.9rem; font-weight:700; margin-top:18px; }
.plan .price span{ font-size:.95rem; font-weight:600; color:var(--c-muted); }
.plan .price .period{ font-size: 1rem; }
.plan .btn{ margin-top:20px; }
.plan ul{ margin-top:24px; display:grid; gap:12px; flex:1; }
.plan ul li{ display:flex; gap:10px; font-size:.9rem; align-items:flex-start; }
.plan ul li .ic-check{ color:var(--c-success); flex-shrink:0; margin-top:2px; }

.compare-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.compare-table th, .compare-table td{ padding:14px 16px; border-bottom:1px solid var(--c-border); text-align:center; font-size:.9rem; }
.compare-table th:first-child, .compare-table td:first-child{ text-align:left; color:var(--c-body); }
.compare-table thead th{ font-weight:800; color:var(--c-ink); }
.table-scroll{ overflow-x:auto; }

/* =========================================================
   FORMS
   ========================================================= */
.field{ display:grid; gap:6px; margin-bottom:18px; }
.field label{ font-weight:700; font-size:.875rem; }
.field input, .field select, .field textarea{
  border:1.5px solid var(--c-border); border-radius:var(--radius-sm); padding:12px 14px; font-family:inherit; font-size:.95rem;
  background:#fff; color:var(--c-ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--c-primary); outline:none; box-shadow:0 0 0 3px var(--c-primary-100); }
.field small{ color:var(--c-muted); font-size:.8rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-msg{ padding:14px 16px; border-radius:var(--radius-sm); font-size:.9rem; margin-top:8px; display:none; }
.form-msg.is-visible{ display:block; }
.form-msg.success{ background:#E9F9F1; color:#0F6B45; border:1px solid #BFE9D3; }

/* =========================================================
   BLOG / RESOURCES
   ========================================================= */
.article-card{ display:flex; flex-direction:column; }
.article-card .thumb{
  aspect-ratio:16/9; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--c-primary-100),var(--c-primary-50));
  display:flex; align-items:center; justify-content:center; color:var(--c-primary); margin-bottom:16px; overflow:hidden;
}
.article-card .tag{ color:var(--c-primary); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.article-card h3{ font-size:1.05rem; margin:8px 0; }
.article-card .meta{ color:var(--c-muted); font-size:.82rem; margin-top:auto; padding-top:10px; }
.article-hero{ background:var(--c-bg-soft); }
.prose{ max-width:72ch; margin-inline:auto; }
/* 2026-09-17: `.container.prose` (dipakai bareng di 1 elemen yang sama, di
   article-detail/project-detail/service-detail.blade.php) — lebar kiri-
   kanan halaman detail Cerita Dampak/Layanan/Insight awalnya disamakan
   dengan batas logo header & tombol "Hubungi Kami" (var(--container),
   1180px), supaya tidak dipersempit lagi jadi 72ch oleh .prose (yang
   sebelumnya menang karena didefinisikan belakangan, spesifisitas sama).
   REVISI (hari yang sama, arahan eksplisit susulan "ukuran lebar kanan
   dan kiri ... coba kurangi 20%"): dikurangi 20% dari 1180px jadi 944px
   — masih jauh lebih lega dari 72ch (~700px) semula, tapi tidak lagi
   selebar penuh container header. calc() dipakai (bukan angka tetap)
   supaya otomatis ikut kalau --container berubah suatu saat. Aturan ini
   HANYA menimpa kombinasi .container+.prose di elemen yang sama; .prose
   sendirian (tanpa .container) di tempat lain tetap 72ch seperti semula.
   product-detail.blade.php punya inline style="max-width:720px" di
   elemen yang sama — itu tetap menang (inline style > class). */
.container.prose{ max-width:calc(var(--container) * 0.8); }
.prose h2{ font-size:1.4rem; margin:36px 0 14px; }
.prose p{ color:var(--c-body); margin-bottom:16px; font-size:1.02rem; }
.prose ul{ margin:0 0 16px; padding-left:0; display:grid; gap:8px; }
.prose ul li{ padding-left:22px; position:relative; color:var(--c-body); }
.prose ul li::before{ content:"—"; position:absolute; left:0; color:var(--c-primary); }
.prose blockquote{ border-left:3px solid var(--c-primary); padding-left:20px; font-style:italic; color:var(--c-ink); margin:24px 0; }

.search-box{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--c-border); border-radius:var(--radius-pill); padding:8px 8px 8px 18px; max-width:420px; }
.search-box input{ border:none; outline:none; flex:1; font-size:.95rem; font-family:inherit; }
.search-box .ic-search{ color:var(--c-muted); flex-shrink:0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:#fff; color:var(--c-muted); padding-top:clamp(48px,6vw,72px); border-top:1px solid var(--c-border); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:44px; border-bottom:1px solid var(--c-border); }
/* v2: brand column + 4 link columns (Produk/Layanan/Tentang/Kontak). Column widths
   are sized to roughly match how much each one actually holds — Kontak only has 2
   short links, so it gets a narrower track instead of the same width as Layanan/
   Tentang (6 items each); this keeps every column's content reasonably close to
   filling its own width, so the row reads as evenly, rhythmically spaced rather
   than lopsided. (An earlier attempt right-aligned just the last column instead —
   that fixed the empty space on the right but broke the left-to-right rhythm of
   the other columns, which is the "not proportional" look being fixed here.) The
   tablet breakpoint puts brand on its own full-width row, then the 4 link columns
   as a clean 2x2 grid — 4 divides evenly into 2 columns, so there's never a
   leftover empty cell on the right either. */
.footer-top--v2{ grid-template-columns:1.3fr 1fr 1fr 1fr 0.7fr; }
@media (max-width:1080px){
  .footer-top--v2{ grid-template-columns:repeat(2,1fr); }
  .footer-top--v2 .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:600px){ .footer-top--v2{ grid-template-columns:1fr; } }
.footer-brand .brand{ color:var(--c-ink); }
.footer-brand p{ margin-top:14px; font-size:.9rem; max-width:32ch; }
/* Jarak judul kolom ke item pertama dirapatkan (16px→10px), begitu juga
   jarak antar-item (10px→8px) — sebelumnya terasa terlalu renggang
   dibanding judulnya. */
.footer-col h4{ color:var(--c-ink); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.footer-col ul{ display:grid; gap:8px; }
.footer-col a{ font-size:.9rem; color:var(--c-muted); }
.footer-col a:hover{ color:var(--c-primary); }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; background:var(--c-bg-soft); color:var(--c-ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.social-row a:hover{ background:var(--c-primary); color:#fff; }
.footer-contact-info{ margin-top:16px; display:grid; gap:6px; }
.footer-contact-info address,
.footer-contact-info a{ font-style:normal; font-size:.85rem; color:var(--c-muted); }
.footer-contact-info a:hover{ color:var(--c-primary); }
/* Nama badan hukum (bold) di baris sendiri, alamat (reguler) di bawahnya. */
.footer-contact-info address strong{ display:block; font-weight:700; color:var(--c-ink); margin-bottom:4px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:24px; font-size:.82rem; flex-wrap:wrap; }
.footer-bottom .legal-links{ display:flex; gap:18px; }
.footer-bottom .legal-links a{ color:var(--c-muted); }
.footer-bottom .legal-links a:hover{ color:var(--c-primary); }
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){ .footer-top{ grid-template-columns:1fr; } }

/* =========================================================
   FLOATING WHATSAPP + BACK TO TOP
   ========================================================= */
.floating-actions{ position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); border:none; cursor:pointer; color:#fff;
}
.fab-wa{ background:#25D366; }
.fab-top{ background:var(--c-navy); width:44px; height:44px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s ease; }
.fab-top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* --- Reveal-on-scroll --- */
.reveal{ opacity:0; transform:translateY(22px) scale(.985); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }
/* Cascading stagger for grids of reveal items, so cards in the same row don't all
   pop in at once — each one is a beat behind the last. */
.process-grid > .reveal:nth-child(1){ transition-delay:0s; }
.process-grid > .reveal:nth-child(2){ transition-delay:.06s; }
.process-grid > .reveal:nth-child(3){ transition-delay:.12s; }
.process-grid > .reveal:nth-child(4){ transition-delay:.18s; }
.process-grid > .reveal:nth-child(5){ transition-delay:.24s; }
.process-grid > .reveal:nth-child(6){ transition-delay:.3s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ transition-delay:0s !important; }
}

/* --- Cookie / consent banner --- */
.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; max-width:520px; margin-inline:auto;
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:20px; z-index:120; display:none; gap:14px;
}
.consent-banner.is-visible{ display:flex; flex-direction:column; }
.consent-banner p{ font-size:.85rem; color:var(--c-body); }
.consent-actions{ display:flex; gap:10px; }

/* --- 404 --- */
.error-page{ text-align:center; padding-block:clamp(60px,10vw,120px); }
.error-page .code{ font-family:var(--font-mono); font-size:clamp(4rem,10vw,7rem); font-weight:700; color:var(--c-primary-100); line-height:1; }

/* =========================================================
   HOMEPAGE V2 — matches the approved homepage guide: deep-blue hero
   card sized to the container (not full-bleed), light trust bar,
   solution wheel, process strip, Insightika promo, testimonials,
   impact cards, media coverage strip, human-centric quote, dark CTA.
   ========================================================= */

/* Dulu "heading kiri, sub-deskripsi kanan" (dua kolom) — diubah jadi
   ditumpuk (sub-deskripsi persis di bawah judul, sama-sama rata kiri) per
   arahan eksplisit, dipakai "Kepercayaan Klien". */
.two-col-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  margin-bottom:36px;
}
.two-col-head h2{ font-size:var(--fs-h2); max-width:26ch; }
.two-col-head p{ color:var(--c-body); max-width:52ch; margin:0; }
.two-col-head .link-arrow{ margin-top:4px; }

.link-arrow{ display:inline-flex; align-items:center; gap:6px; color:var(--c-primary); font-weight:700; font-size:.92rem; }
.link-arrow:hover{ color:var(--c-primary-600); }
.link-arrow svg{ transition:transform .15s ease; }
.link-arrow:hover svg{ transform:translateX(3px); }
.sec-cta{ text-align:center; margin-top:32px; }

/* --- Hero v2: contained (not full-bleed) deep-blue card --- */
/* True full-bleed hero (edge-to-edge, no side margins or radius) that starts at the very
   top of the page and runs BEHIND the fixed header — the header is transparent here and
   solidifies on scroll (see .site-header / body.has-hero rules). */
.hero-v2{
  position:relative; overflow:hidden; background:var(--grad-hero); color:#fff;
  display:flex; align-items:center; min-height:clamp(560px,82vh,860px);
}
/* Real photo, bleeding to every edge of the viewport — a left-edge fade blends it into
   the hero gradient so the copy on the left stays legible, matching the approved reference. */
.hero-v2-photo{ position:absolute; inset:0; z-index:0; }
.hero-v2-photo img, .hero-v2-photo video{
  width:100%; height:100%; object-fit:cover; object-position:90% center;
  transform:scale(1.045); transition:transform .25s ease-out; will-change:transform;
}
.hero-v2-photo::after{
  content:""; position:absolute; inset:0;
  /* Video digeser lebih ke kanan lagi (85%→90%) supaya ~90% frame videonya
     terlihat. Opacity tiap stop gradien juga diturunkan 20% (dikali .8) per
     arahan eksplisit agar shadow biru di kiri tidak terlalu pekat. */
  background:linear-gradient(90deg, rgba(13,21,104,.8) 0%, rgba(13,21,104,.78) 34%, rgba(13,21,104,.56) 50%, rgba(13,21,104,.24) 66%, transparent 82%);
}
.hero-v2-inner{ position:relative; z-index:2; width:100%; }
.hero-v2-copy{ max-width:640px; padding-block:calc(var(--header-h) + 24px) 24px; }
.hero-v2-copy h1{ color:#fff; font-size:var(--fs-h1); line-height:1.08; letter-spacing:-0.02em; }
.hero-v2-copy h1 .accent{ color:var(--c-cyan-bright); }
.hero-v2-copy .lead{ color:#C7D3F5; font-size:1.02rem; margin-top:18px; max-width:48ch; }
.hero-v2-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.btn-outline-white{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline-white:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

@media (max-width:860px){
  .hero-v2-photo{ display:none; }
  .hero-v2-copy{ max-width:none; }
}

/* --- Trust bar v2: light strip, text-wordmark client logos --- */
.trust-v2{ padding-block:36px; background:var(--c-bg-soft); }
.trust-v2 p{ text-align:center; font-size:.85rem; color:var(--c-muted); font-weight:600; margin-bottom:26px; }
.trust-v2-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.trust-v2-track{
  /* 62 real client logos now instead of 6 text names — same 22s duration over ~10x
     the content would blur past; scaled up so the per-logo pace stays comfortable. */
  display:flex; width:max-content; animation:trust-marquee 140s linear infinite;
}
.trust-v2-marquee:hover .trust-v2-track{ animation-play-state:paused; }
@keyframes trust-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .trust-v2-track{ animation:none; } }
.trust-v2-row{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:clamp(28px,5vw,56px); padding-inline:clamp(14px,2.5vw,28px); flex-shrink:0; }
.trust-word{ font-weight:800; font-size:1.05rem; letter-spacing:-0.01em; color:#9AA3B8; opacity:.85; white-space:nowrap; transition:opacity .15s ease, color .15s ease; }
.trust-word:hover{ opacity:1; color:var(--c-body); }
.trust-word.is-lower{ text-transform:lowercase; }
.trust-word.is-wide{ letter-spacing:.04em; }
.trust-logo{
  height:35px; width:auto; max-width:127px; object-fit:contain; flex-shrink:0; /* +15% from 30px/110px */
  filter:grayscale(1); opacity:.55; transition:filter .15s ease, opacity .15s ease;
}
.trust-logo:hover{ filter:grayscale(0); opacity:1; }

/* --- Solution wheel section --- */
.solution-v2{ padding-block:clamp(56px,7vw,96px); }
.sol-head{ max-width:640px; margin-inline:auto; margin-bottom:32px; }
.sol-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:48px; }
.sol-tab{
  display:inline-flex; align-items:center; gap:9px; padding:9px 18px 9px 9px; border-radius:var(--radius-md);
  border:none; background:var(--c-bg-soft); color:var(--c-body); font-weight:600; font-size:.88rem; cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sol-tab .ic{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sol-tab.is-active{ background:#fff; color:var(--c-ink); box-shadow:var(--shadow-md); }
/* Real tab panels — only .is-active is shown; switched entirely by JS (see main.js),
   replacing the old decorative wheel chart that didn't respond to the tabs at all. */
.sol-panel{ display:none; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.sol-panel.is-active{ display:grid; animation:fc-fade .35s ease; }
.sol-copy h3{ font-size:var(--fs-h3); }
.sol-copy p{ color:var(--c-body); margin-top:12px; }
.sol-checks{ display:grid; gap:12px; margin-top:20px; }
.sol-checks li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.95rem; }
.sol-checks .ic-check{ color:var(--c-primary); flex-shrink:0; }
.sol-copy .link-arrow{ margin-top:22px; }

.sol-visual{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-xl);
  padding:clamp(32px,4vw,48px); text-align:center; box-shadow:var(--shadow-md);
}
.sol-visual-ic{ width:64px; height:64px; border-radius:18px; display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-bottom:20px; }
.sol-visual h4{ font-size:1.2rem; letter-spacing:-0.01em; }
.sol-visual-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.sol-visual-tags span{ font-size:.78rem; font-weight:600; color:var(--c-primary-700); background:var(--c-primary-50); padding:6px 12px; border-radius:var(--radius-pill); }
@media (max-width:860px){ .sol-panel.is-active{ grid-template-columns:1fr; } .sol-visual{ order:-1; } }

/* --- Our Service — sized/styled to match the card language used across the rest of
   the page (.card, .t-card, .eco-card), not the old cramped 6-across strip. --- */
.process-v2{ padding-block:clamp(48px,6vw,88px); background:var(--c-bg-soft); }
/* Dulu "heading kiri, sub-deskripsi kanan" (dua kolom) — diubah jadi
   ditumpuk (sub-deskripsi persis di bawah judul, sama-sama rata kiri) per
   arahan eksplisit, dipakai "Our Product" & "Our Service". */
.process-head{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:36px; }
.process-head h2{ font-size:var(--fs-h2); max-width:26ch; }
.process-head p{ color:var(--c-body); max-width:52ch; margin:0; }
.process-head .link-arrow{ margin-top:4px; }
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.process-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:28px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.process-card:hover{ box-shadow:var(--shadow-glow); border-color:var(--c-primary-100); transform:translateY(-2px); }
.process-card .ic{ width:48px; height:48px; border-radius:var(--radius-md); background:var(--grad-tech); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.process-card h4{ font-size:1.05rem; letter-spacing:-0.01em; }
.process-card p{ color:var(--c-body); font-size:.88rem; margin-top:8px; line-height:1.55; }
@media (max-width:760px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .process-grid{ grid-template-columns:1fr; } }

/* --- Insightika promo banner — own black/red/yellow identity (see tokens above) --- */
/* Full-bleed background — same pattern as .feature-cta-v2 (color on the section
   itself, not a rounded inset card). */
.insightika-v2{ padding-block:clamp(48px,6vw,80px); background:var(--insight-bg); overflow:hidden; }
.insightika-card{
  position:relative; color:#fff;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px;
}
/* Real logo (uploaded by user) on a white chip, so its original black/dark-red
   colors stay crisp regardless of the card's background. */
.insightika-logo{ display:inline-block; background:#fff; padding:10px 18px; border-radius:var(--radius-md); margin-bottom:20px; line-height:0; }
.insightika-logo img{ height:26px; width:auto; display:block; }
.insightika-copy h2{ color:#fff; font-size:var(--fs-h3); max-width:20ch; }
.insightika-copy p{ color:rgba(255,255,255,.7); margin-top:12px; max-width:42ch; }
.insightika-copy .btn{ margin-top:22px; }
.btn-insight{ background:var(--c-primary); color:#fff; }
.btn-insight:hover{ background:var(--c-primary-600); }
.insightika-social{ display:flex; gap:10px; margin-top:24px; }
.insightika-social a{
  width:38px; height:38px; border-radius:50%; background:transparent; border:1.5px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s ease, border-color .15s ease;
}
.insightika-social a:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.insightika-visual{ position:relative; min-height:540px; display:flex; align-items:center; justify-content:center; }

/* Real Indonesia province-boundary map asset, sitting behind everything else
   as a thin background shadow — kept subtle via low opacity + a soft shadow. */
.insightika-map{
  position:absolute; z-index:0; top:50%; left:50%; transform:translate(-50%,-46%);
  width:150%; max-width:640px; height:auto; opacity:.14; pointer-events:none;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));
}

/* Dashed "network" rings behind the phone — the connective visual from the
   reference, built as plain CSS circles (no extra image assets needed). */
.insightika-orbit-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border:1.5px dashed rgba(255,255,255,.25); border-radius:50%; z-index:0;
}
.insightika-orbit-ring--1{ width:64%; height:64%; }
.insightika-orbit-ring--2{ width:96%; height:96%; }

/* Phone mockup — dark screen with an autoplaying video (no logo/flag overlay
   in the app-bar anymore) and a simple bottom nav row. The bezel uses a
   floating "dynamic island" pill instead of the old notch cutout. Aspect
   ratio kept a bit shorter than a real iPhone so the mockup doesn't tower
   over the rest of the card. */
.insightika-phone{
  position:relative; z-index:2; width:min(250px,62%); aspect-ratio:9/17; background:#0d0d0d;
  border-radius:34px; padding:8px; box-shadow:var(--shadow-lg); border:2px solid rgba(255,255,255,.18);
}
.insightika-phone::before{
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:32%; height:9px;
  background:#0d0d0d; border-radius:var(--radius-pill); z-index:3;
}
.insightika-phone-screen{ position:relative; width:100%; height:100%; border-radius:26px; overflow:hidden; background:#000; display:flex; flex-direction:column; }
.insightika-app-video{ position:relative; flex:1; background:#1a1a1a; min-height:0; }
.insightika-app-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.insightika-app-nav{ position:relative; z-index:1; display:flex; justify-content:space-around; align-items:center; padding:10px 8px 14px; border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; margin-top:auto; background:#000; }
.insightika-app-nav .ic{ color:rgba(255,255,255,.85); }
.insightika-app-nav .ic--add{
  width:22px; height:22px; border-radius:50%; background:var(--insight-red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:700; line-height:1;
}

/* Floating sticker badges orbiting the phone — the full set from the
   reference mockup (flag, smiley, monas, chat bubble, pura, lightbulb,
   megaphone, heart, borobudur, camera, pencil), each sized to roughly match
   its prominence in that reference rather than one uniform badge size. */
.insightika-orbit-icon{
  position:absolute; z-index:3; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.insightika-orbit-icon img{ width:100%; height:auto; display:block; }
/* Left column, evenly spaced top-to-bottom: flag, monas, pura, megaphone. */
.insightika-orbit-icon--1{ top:0%; left:-12%; width:64px; }
.insightika-orbit-icon--2{ top:27%; left:-14%; width:60px; }
.insightika-orbit-icon--3{ top:56%; left:-13%; width:64px; }
.insightika-orbit-icon--4{ top:84%; left:-9%; width:52px; }
/* Right column, evenly spaced top-to-bottom: chat, lightbulb, heart, camera, pencil. */
.insightika-orbit-icon--5{ top:-3%; right:-10%; width:46px; }
.insightika-orbit-icon--6{ top:18%; right:-14%; width:48px; }
.insightika-orbit-icon--7{ top:40%; right:-15%; width:42px; }
.insightika-orbit-icon--8{ top:62%; right:-14%; width:50px; }
.insightika-orbit-icon--9{ top:85%; right:-9%; width:48px; }
/* Top-center + bottom-right corner accent. */
.insightika-orbit-icon--10{ top:-9%; left:42%; width:42px; }
.insightika-orbit-icon--11{ bottom:-9%; right:4%; width:68px; }
@media (max-width:860px){
  .insightika-card{ grid-template-columns:1fr; }
  .insightika-visual{ min-height:480px; }
  .insightika-orbit-icon--6, .insightika-orbit-icon--7, .insightika-orbit-icon--8, .insightika-orbit-icon--9, .insightika-orbit-icon--11{ display:none; }
}
@media (max-width:480px){
  .insightika-orbit-icon--3, .insightika-orbit-icon--4, .insightika-orbit-icon--5{ display:none; }
  .insightika-orbit-ring--2{ display:none; }
}

/* --- Ecosystem: media logos + intro (left) + impact-story carousel (right) ---
   Replaces the old separate media-strip + "Cerita Dampak" grid with one combined
   section, matching the approved reference layout. */
.ecosystem-v2{ padding-block:clamp(56px,7vw,96px); background:var(--c-bg-soft); }
.ecosystem-inner{ display:grid; grid-template-columns:.85fr 1.55fr; gap:48px; align-items:start; }
.ecosystem-copy h2{ font-size:var(--fs-h2); margin-top:14px; }
.ecosystem-copy p{ color:var(--c-body); margin-top:14px; max-width:38ch; }
.ecosystem-logos{ display:flex; flex-wrap:wrap; gap:16px 22px; margin-top:28px; }
.ecosystem-logos .logo-chip{ font-size:.8rem; opacity:.8; }
.ecosystem-copy .link-arrow{ margin-top:24px; }

.ecosystem-carousel-wrap{ min-width:0; }
/* Fade halus di tepi kanan (bukan potongan tajam) untuk kartu yang "mengintip"
   di ujung carousel — sebelumnya kartu terakhir kepotong tegas di tepi
   container (terlihat seperti kesalahan lebar/overflow), sekarang memudar
   lembut jadi terasa disengaja. Berlaku ke semua carousel yang pakai
   .ecosystem-carousel (produk/layanan di beranda, tim di Tentang Kami), biar
   konsisten. */
.ecosystem-carousel{
  -webkit-mask-image:linear-gradient(to right, black 0, black calc(100% - 56px), transparent 100%);
  mask-image:linear-gradient(to right, black 0, black calc(100% - 56px), transparent 100%);
}
/* Dipakai carousel yang kartunya sudah pas terhitung muat penuh dalam batas
   (mis. tim di Tentang Kami) — tanpa ini, kartu terakhir yang sebenarnya
   sudah utuh malah terlihat memudar/kena "bayangan" putih di tepi kanannya. */
.ecosystem-carousel--no-fade{ -webkit-mask-image:none; mask-image:none; }
.ecosystem-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; scrollbar-width:none; }
.ecosystem-track::-webkit-scrollbar{ display:none; }
.eco-card{
  scroll-snap-align:start; flex:0 0 min(270px,76vw); background:#fff; border-radius:var(--radius-md);
  overflow:hidden; text-decoration:none; color:inherit; display:block;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease;
}
.eco-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.eco-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.eco-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.eco-card:hover .eco-thumb img{ transform:scale(1.04); }
.eco-tag{
  position:absolute; left:12px; bottom:12px; background:#fff; color:var(--c-primary-700);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius:6px;
}
.eco-body{ padding:16px 16px 20px; }
.eco-card h4{ font-size:.95rem; line-height:1.4; min-height:2.8em; }
.eco-card p{ color:var(--c-muted); font-size:.78rem; margin-top:8px; }
.eco-card .link-arrow-sm{ display:inline-block; margin-top:10px; font-size:.85rem; font-weight:700; color:var(--c-primary); }

.ecosystem-controls{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
.eco-dots{ display:flex; gap:6px; }
.eco-dots span{ width:7px; height:7px; border-radius:50%; background:var(--c-border-strong); }
.eco-dots span.is-active{ width:20px; border-radius:4px; background:var(--c-primary); }
@media (max-width:960px){ .ecosystem-inner{ grid-template-columns:1fr; } }

/* --- Cerita Dampak (/our-work) photo carousel — plain flat card-grid style
   (per arahan eksplisit: dibuat seperti grid kartu artikel biasa, tilt "Google
   Labs" fanned-deck sebelumnya dibuang): white card, real project photo up
   top, title/desc/link below, always-on soft shadow, no rotation. Draggable
   with the mouse (see main.js's pointer drag handler) on top of native
   touch/trackpad scroll, and autoplays via [data-carousel-autoplay] on the wrap. */
.story-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 4px 28px; scrollbar-width:none; cursor:grab; }
.story-track::-webkit-scrollbar{ display:none; }
.story-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.story-card{
  position:relative; flex:0 0 300px; scroll-snap-align:start; display:block; text-decoration:none; color:inherit;
  background:#fff; border-radius:var(--radius-lg); padding:16px 16px 22px; box-shadow:var(--shadow-md);
  border:1px solid var(--c-border); transition:transform .2s ease, box-shadow .2s ease;
}
.story-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.story-card-media{ aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; background:var(--c-bg-soft); }
.story-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; pointer-events:none; }
.story-card:hover .story-card-media img{ transform:scale(1.05); }
.story-card-icon{
  position:absolute; top:32px; left:32px; z-index:1; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:rgba(10,15,30,.4); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.story-card-body{ padding:16px 4px 0; }
.story-card-tag{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-primary); margin-bottom:6px; }
.story-card-body h3{ font-size:1.05rem; line-height:1.35; }
.story-card-body p{ color:var(--c-body); font-size:.85rem; margin-top:6px; line-height:1.5; }
.story-card-cta{ display:inline-block; margin-top:14px; font-size:.85rem; font-weight:700; color:var(--c-primary); }
@media (max-width:640px){ .story-card{ flex-basis:230px; } }

/* --- Human-centric quote section --- */
.quote-v2{ padding-block:clamp(56px,7vw,96px); background:var(--grad-hero); color:#fff; }
.quote-v2-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.quote-v2 .quote-mark{ font-family:var(--font-display); font-size:2.6rem; color:var(--c-cyan-bright); line-height:1; margin-bottom:8px; }
.quote-v2 h2{ color:#fff; font-size:var(--fs-h2); max-width:18ch; }
.quote-v2 h2 .accent{ color:var(--c-cyan-bright); }
.quote-v2 p{ color:#C7D3F5; margin-top:16px; max-width:52ch; }
.quote-v2 p strong{ color:#fff; }
.quote-v2-visual{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
}
.quote-v2-visual img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .quote-v2-inner{ grid-template-columns:1fr; } .quote-v2-visual{ display:none; } }

/* --- Final feature-carousel + CTA — dark navy section, a rotating pain-point/
   solution card with prev/next arrows, CTA button, and a real cutout photo (PNG
   with transparent background) floating directly over the navy, no card/frame or
   decorative cut-corner shapes needed since the photo's own edge is already the
   "cut". --- */
.feature-cta-v2{
  position:relative; overflow:hidden;
  padding-block:clamp(56px,7vw,96px);
  background:var(--grad-hero);
}
.feature-cta-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; }
.feature-cta-copy h2{ color:#fff; font-size:var(--fs-h2); max-width:16ch; margin-top:14px; }
.feature-cta-copy .lead{ color:#B9C6EA; margin-top:14px; max-width:40ch; font-size:1.02rem; }

/* Kartu full-width (bukan lagi flex row bersama tombol prev/next di kiri-kanan
   — itu yang bikin kartunya sempit terjepit dan tidak sejajar dengan lebar
   judul di atasnya) + baris tombol nav kecil di bawah kartu. */
.fc-card-wrap{ margin-top:32px; }
.fc-card-nav{ display:flex; gap:12px; margin-top:16px; }
.fc-nav{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; border:none; background:var(--c-primary);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.fc-nav:hover{ background:var(--c-primary-600); transform:scale(1.06); }
.fc-nav--prev svg{ transform:scaleX(-1); }
/* Generic carousel "prev" arrow flip — shared by every [data-carousel-prev] button
   (Produk/Layanan/Testimoni/Cerita carousels) instead of repeating this inline. */
[data-carousel-prev] svg{ transform:scaleX(-1); }
/* Pain-point card — a clean white card now supplies the contrast (the section itself
   went dark), with a thin brand-color top border instead of the old gradient/dot fill. */
.fc-card{
  position:relative; width:100%; background:#fff; border-top:4px solid var(--c-primary);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px 30px; min-height:168px;
}
.fc-slide{ display:none; }
.fc-slide.is-active{ display:block; animation:fc-fade .35s ease; }
@keyframes fc-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.fc-slide h3{ font-size:1.1rem; line-height:1.4; color:var(--c-ink); }
.fc-slide p{ color:var(--c-body); margin-top:10px; font-size:.9rem; line-height:1.6; }
.fc-cta{ margin-top:28px; }

.feature-cta-visual{ position:relative; z-index:1; min-height:380px; display:flex; align-items:center; justify-content:center; }
/* Plain rounded photo card — no chevrons/cut-corner accents, just a clean framed
   team photo. */
.fc-photo{ position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.fc-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }

/* --- "Kami bekerja lintas konteks" — dulu kolase foto proyek acak +
   label kategori dekoratif, sekarang diganti satu ilustrasi utuh milik user
   yang sudah menggambarkan persis alur ceritanya sendiri (tanpa perlu
   aksen tambahan). --- */
.feature-cta-copy h2 .accent{ color:var(--c-cyan-bright); }
.context-illustration{ display:flex; align-items:center; justify-content:center; }
/* Aset kedua (complex-aset2.png) latarnya sudah transparan bersih tanpa
   vignette gelap — drop-shadow lama dibuang karena di ilustrasi yang
   elemennya banyak & terpisah-pisah (kartu, bubble chat, 3 orang), shadow
   malah membuat tiap bentuk kelihatan "berbayang" sendiri-sendiri, bukan
   satu komposisi yang bersih. */
.context-illustration img{ width:100%; height:auto; display:block; }
@media (max-width:960px){
  .feature-cta-inner{ grid-template-columns:1fr; }
  .feature-cta-visual, .context-illustration{ order:-1; min-height:300px; }
}
@media (max-width:560px){ .fc-card{ padding:22px 20px; } }

/* =========================================================
   V2-ONLY SUPPLEMENTARY COMPONENTS (used only by src/pages/v2.html)
   Two new structural patterns not covered by existing components — built
   entirely from the SAME design tokens as the rest of the site (--c-primary,
   --c-ink, --c-body, --c-navy, --c-border, --font-base/--font-display,
   --radius-*), so they carry zero new color/typography of their own.
   ========================================================= */
.v2-timeline{ display:grid; }
.v2-tl-row{ display:grid; grid-template-columns:64px 1fr 1.4fr; gap:24px; padding-block:28px; border-top:1px solid rgba(255,255,255,.12); align-items:start; }
.v2-tl-row:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.v2-tl-num{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--c-cyan); }
.v2-tl-title{ font-size:1.15rem; font-weight:700; color:#fff; font-family:var(--font-display); }
.v2-tl-body p{ color:#B9C6EA; font-size:.92rem; line-height:1.6; }
.v2-tl-body .out{ display:block; margin-top:8px; font-size:.78rem; color:rgba(255,255,255,.5); }
.v2-tl-body .out strong{ color:rgba(255,255,255,.85); font-weight:700; }
@media (max-width:760px){
  .v2-tl-row{ grid-template-columns:40px 1fr; }
  .v2-tl-row > *:nth-child(3){ grid-column:1/-1; margin-top:6px; }
}

/* Light-background variant — same grid, dark-on-white text tokens, for use
   outside a section--navy wrapper (e.g. the real company milestones list). */
.v2-timeline--light .v2-tl-row{ border-top-color:var(--c-border); }
.v2-timeline--light .v2-tl-row:last-child{ border-bottom-color:var(--c-border); }
.v2-timeline--light .v2-tl-num{ color:var(--c-primary); }
.v2-timeline--light .v2-tl-title{ color:var(--c-ink); }
.v2-timeline--light .v2-tl-body p{ color:var(--c-body); }

.v2-compare{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--c-border); border-radius:var(--radius-lg); overflow:hidden; }
.v2-compare > div{ padding:clamp(26px,3vw,36px); }
.v2-compare-a{ background:#fff; }
.v2-compare-b{ background:var(--c-navy); color:#fff; }
.v2-compare h4{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-muted); margin-bottom:18px; font-family:var(--font-base); font-weight:700; }
.v2-compare-b h4{ color:rgba(255,255,255,.5); }
.v2-compare ul{ display:grid; gap:14px; }
.v2-compare li{ font-size:.92rem; line-height:1.5; padding-left:16px; position:relative; color:var(--c-body); }
.v2-compare-b li{ color:rgba(255,255,255,.85); }
.v2-compare li::before{ content:"—"; position:absolute; left:0; color:var(--c-muted); }
.v2-compare-b li::before{ color:var(--c-cyan); }
@media (max-width:760px){ .v2-compare{ grid-template-columns:1fr; } }

/* Case-study tabs — 3 impact stories (GERCEP, BIGMIND, Leadership Campaign) switched
   via data-case-tab/data-case-panel (separate from data-sol-tab so the two switchers
   never cross-talk). Tab pill reuses .sol-tab; the panel is a new KPI-card grid +
   photo layout, colored with the same --c-danger/--c-primary/--c-navy already used
   sitewide — no new palette. */
.case-tabs{ margin-bottom:32px; }
/* Kolom kiri (kartu KPI) sebelumnya 1.5fr dan align-items:stretch — grid
   memaksa tinggi kolom kiri menyamai kolom kanan (foto/video), tapi
   .case-kpi-grid punya align-content:start, jadi kartu 2x2-nya tetap
   kompak di atas dan sisa ruang di bawahnya jadi kosong/kelihatan bolong.
   Sekarang align-items:start (masing-masing kolom setinggi kontennya
   sendiri) + rasio dibalik supaya foto/video lebih besar/dominan, dan
   kartu KPI dipadatkan (padding & min-height diperkecil) — per arahan
   eksplisit: kurangi ruang kosong di box, perbesar aset di kanan. */
.case-panel{ display:none; grid-template-columns:1fr 1.35fr; gap:20px; align-items:start; }
.case-panel.is-active{ display:grid; animation:fc-fade .35s ease; }
/* Sebelumnya kartu angka (case-kpi-stats) ditaruh di BAWAH kartu deskripsi
   (kolom, ditumpuk). Per arahan eksplisit: dipindah ke SAMPING KANAN kartu
   deskripsi (baris, bukan kolom) — deskripsi dapat porsi lebar lebih besar
   (flex:1.5), kartu-kartu angka ditumpuk vertikal di kolom sempit sebelah
   kanannya (flex:1, masing-masing kartu flex:1 juga supaya rata tinggi).
   Sempat dicoba align-items:flex-start (tiap kolom setinggi kontennya
   sendiri) supaya box deskripsi tidak nyisain ruang kosong — tapi per
   arahan eksplisit dikembalikan ke stretch (kedua kolom sama tinggi),
   dinilai lebih baik. */
.case-kpi-grid{ display:flex; gap:12px; align-items:stretch; }
.case-kpi-grid .case-kpi-card--context{ flex:1.5; }
.case-kpi-stats{ display:flex; flex-direction:column; gap:10px; flex:1; }
.case-kpi-stats .case-kpi-card{ flex:1; min-width:0; min-height:0; }
.case-kpi-card{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:18px;
  color:#fff; min-height:112px; display:flex; flex-direction:column;
}
.case-kpi-card--red{ background:var(--c-danger); }
.case-kpi-card--blue{ background:var(--c-primary); }
/* Navy (gelap) diganti pink — lebih cerah per arahan eksplisit. Amber/kuning
   (--c-warning) sempat dicoba tapi kontras teks putihnya cuma ~2.15:1 (gagal
   WCAG AA 4.5:1, teks jadi sulit dibaca). --c-pink yang sudah ada (#FF4FA3,
   dipakai di ikon dropdown/produk lain) juga cuma ~3.04:1 — cukup untuk teks
   besar tapi tidak untuk label kecil di kartu ini. Warna hex khusus di bawah
   (#DB2777) dipilih karena kontrasnya ~4.6:1, lolos WCAG AA untuk teks putih
   ukuran kecil sekalipun — sengaja tidak pakai var(--c-pink) yang sudah ada
   supaya tidak mengubah warna elemen lain yang memakainya. */
.case-kpi-card--pink{ background:#DB2777; }
.case-kpi-card--green{ background:var(--c-success); }
/* Aksen petir/electric (.kpi-decor, ikon #ic-bolt) dibuang dari semua kartu
   KPI per arahan eksplisit — sebelumnya ada di tiap kartu (konteks & angka). */
.case-kpi-num{ position:relative; z-index:1; font-family:var(--font-display); font-weight:800; font-size:1.85rem; line-height:1; margin-top:auto; }
.case-kpi-label{ position:relative; z-index:1; font-size:.82rem; color:rgba(255,255,255,.85); margin-top:6px; line-height:1.4; }
.case-kpi-card--context{ justify-content:flex-start; }
.case-kpi-card--context .tag-mono{ position:relative; z-index:1; background:rgba(255,255,255,.16); color:#fff; align-self:flex-start; }
.case-kpi-card--context h3{ position:relative; z-index:1; color:#fff; font-size:1.1rem; margin-top:10px; }
.case-kpi-card--context p{ position:relative; z-index:1; color:rgba(255,255,255,.82); font-size:.86rem; margin-top:6px; line-height:1.5; }
/* Shadow biru (bukan shadow netral bawaan) — bikin foto terasa lebih
   "menyatu" dengan identitas warna brand dan lebih menarik/hidup.
   min-height dinaikkan (280→420) supaya foto/video mengisi ruang yang
   dibebaskan dari pemadatan kartu KPI di kolom kiri. align-self:stretch
   di-set eksplisit karena .case-panel sekarang align-items:start (supaya
   .case-kpi-grid TIDAK ikut dipaksa setinggi kolom ini) — tanpa ini,
   height:100% pada <img>/<video> di dalamnya tidak resolve (butuh tinggi
   definit dari parent), jadi videonya cuma setinggi rasio aslinya dan
   menyisakan ruang kosong di bawahnya. */
.case-photo-wrap{
  position:relative; border-radius:var(--radius-xl); overflow:hidden; min-height:420px;
  align-self:stretch;
  box-shadow:0 28px 56px -12px rgba(21,94,239,.45), 0 10px 24px rgba(21,94,239,.22);
}
.case-photo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- Video Desaku Maju–GERCEP: sama seperti .case-photo-wrap (shadow biru,
   radius) tapi dengan overlay tombol suara + affordance klik-untuk-full-view. --- */
.case-video-wrap{ cursor:pointer; background:#000; }
/* object-fit:cover sebelumnya memotong sisi kiri/kanan videonya — di rasio kotak
   ini sumber videonya (960x542, ~16:9) jadi ikut ter-zoom & crop, dan judul
   "VOKASI" yang render-nya nempel ke tepi kiri frame asli ikut kepotong. Ganti
   ke contain (frame video utuh selalu terlihat, dengan letterbox bar hitam
   yang menyatu dengan background videonya sendiri yang memang gelap). */
.case-video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.case-video-mute{
  position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(13,21,104,.55); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.35);
  cursor:pointer; transition:background .15s ease;
}
.case-video-mute:hover{ background:rgba(13,21,104,.8); }
.case-video-expand{
  position:absolute; bottom:14px; right:14px; z-index:1; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(13,21,104,.55); backdrop-filter:blur(4px); pointer-events:none;
  opacity:0; transform:scale(.9); transition:opacity .15s ease, transform .15s ease;
}
.case-video-wrap:hover .case-video-expand{ opacity:1; transform:scale(1); }
@media (max-width:860px){
  .case-panel.is-active{ grid-template-columns:1fr; }
  .case-photo-wrap{ order:-1; min-height:220px; }
}
/* Baris deskripsi+angka (case-kpi-grid) jadi terlalu sempit di layar sempit —
   balik ke tumpuk vertikal (deskripsi di atas, baris angka di bawah) di sini. */
@media (max-width:640px){ .case-kpi-grid{ flex-direction:column; } }
@media (max-width:520px){ .case-kpi-stats{ flex-direction:column; } }

/* Tile carousel — Our Product / Our Service card row on v2.html, restyled to match
   the clean, straight (non-tilted) carousel pattern already used by the Ecosystem
   section below: image-style thumb + body + prev/next arrows + dots, reusing that
   exact same generic [data-carousel] JS (no new script needed). The "thumb" here
   is a colored tile instead of a photo — same .ic--* colors already assigned to
   each product/service icon elsewhere, just a bigger icon so it reads like an
   app icon rather than a small badge. */
.tile-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; scrollbar-width:none; }
.tile-track::-webkit-scrollbar{ display:none; }
/* 2026-09-17: display:flex + flex-direction:column ditambahkan per arahan
   eksplisit user ("rapihkan agar tulisan learn more sejajar") — kartu-kartu
   di baris .tile-track sudah SAMA TINGGI secara otomatis (flex item di
   .tile-track yang display:flex, stretch bawaan), tapi tanpa ini
   "Learn more →" ada di posisi Y berbeda-beda tiap kartu karena deskripsinya
   panjang-pendeknya beda (2 baris vs 4 baris). Sekarang .tile-body ikut jadi
   flex column + flex:1 (mengisi sisa tinggi kartu) dan link-nya
   margin-top:auto (selalu menempel ke bawah), jadi rata sejajar di semua
   kartu apa pun panjang deskripsinya. */
.tile-card{
  display:flex; flex-direction:column;
  scroll-snap-align:start; flex:0 0 240px; background:#fff; border:1px solid var(--c-border);
  border-radius:var(--radius-lg); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.tile-card .tile-thumb{ flex-shrink:0; }
.tile-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
/* color:#fff here matters: the icons inside use stroke="currentColor" internally,
   which resolves from this CSS color property — not from the stroke="#fff"
   attribute on the wrapping <svg> — so without this the icons inherited the
   page's dark ink text color instead of turning white. Same colored-icon badge
   as the nav dropdown (not a screenshot) — one consistent mark per product,
   easy to recognize and remember wherever it shows up. */
.tile-thumb{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:#fff; }
/* .tile-thumb--icon: kartu produk beranda yang thumbnail-nya logo ikon 3D
   transparan (2026-09-14, lihat 'thumb_style' di config/innovesia.php) —
   beda dari thumb foto/screenshot (object-fit:cover, penuh sampai tepi).
   Ikon dipakai lebih kecil (padding, object-fit:contain) supaya tidak
   terpotong oleh rasio 4:3. Latarnya pastel warna-warni per produk (bukan
   biru monoton) — nilainya datang dari custom property --thumb-bg yang
   di-set inline per kartu lewat $p['thumb_bg'] (home.blade.php), dengan
   #C7D9FF sebagai fallback kalau suatu saat produk belum diisi warnanya.
   Radial highlight putih tipis di atasnya meniru kesan "glow" lembut seperti
   referensi desain yang diberikan user, tanpa perlu color-mix()/gradient
   generator supaya tetap kompatibel luas. Selector 2-kelas
   (.tile-thumb.tile-thumb--icon) sengaja dipakai biar spesifisitasnya pasti
   menang atas ".tile-thumb img" di atas, apa pun urutan sumbernya. */
.tile-thumb.tile-thumb--icon{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%), var(--thumb-bg, #C7D9FF);
  padding:22px; box-sizing:border-box;
}
.tile-thumb.tile-thumb--icon img{ width:100%; height:100%; object-fit:contain; }
.tile-body{ padding:16px 16px 20px; display:flex; flex-direction:column; flex:1; }
.tile-card h4{ font-size:.95rem; line-height:1.4; }
.tile-card p{ color:var(--c-muted); font-size:.8rem; margin-top:8px; line-height:1.5; }
.tile-card .link-arrow-sm{ display:inline-block; margin-top:auto; padding-top:10px; font-size:.85rem; font-weight:700; color:var(--c-primary); }
@media (max-width:600px){ .tile-card{ flex-basis:200px; } }

/* .tile-card--related / .tile-thumb--related — "Produk Lainnya" di bagian
   bawah halaman detail produk (product-detail.blade.php, dipakai SEMUA
   produk, bukan cuma ICC). Class KHUSUS supaya tidak ikut memengaruhi
   .tile-card lain di beranda (carousel produk/layanan) yang pakai markup
   sama tapi tidak diminta berubah. 2026-09-16, per arahan eksplisit user:
   1) ikon dikecilkan 30% (transform:scale — bukan ubah padding, supaya
      tetap benar di lebar kartu berapa pun, tidak perlu dihitung ulang);
   2) "Pelajari lebih lanjut →" disejajarkan rata di baris yang sama across
      4 kartu, walau panjang deskripsinya beda-beda — dicapai dengan
      menjadikan kartu & body-nya flex column, tautannya didorong ke bawah
      lewat margin-top:auto (grid row sudah stretch tinggi kartu secara
      otomatis, tinggal body-nya yang perlu ikut flex mengisi ketinggian). */
.tile-card--related{ display:flex; flex-direction:column; height:100%; }
.tile-thumb--related img{ transform:scale(.7); }
.tile-card--related .tile-body{ display:flex; flex-direction:column; flex:1; }
.tile-card--related .link-arrow-sm{ margin-top:auto; padding-top:10px; }

/* AI Era hero-style section (replaces the earlier quote-style "Era AI" block) —
   copy + 4 mini value props on the left, a photo with floating annotation cards
   and a decorative blob shape on the right. Every color here is an existing
   token (--c-primary/-50/-100, --c-ink/-body/-muted). */
.ai-era-v2{ padding-block:clamp(56px,7vw,100px); overflow:hidden; }
.ai-era-inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }
.ai-era-copy{ position:relative; }
.ai-era-copy h2{ font-size:var(--fs-h1); margin-top:16px; max-width:14ch; }
.ai-era-copy h2 .accent{ color:var(--c-primary); }
.ai-era-copy > p{ color:var(--c-body); margin-top:18px; max-width:48ch; font-size:1.02rem; line-height:1.65; }
.ai-era-copy > p strong{ color:var(--c-ink); }
.ai-era-features{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; padding-top:28px; }
.ai-era-feature .ic{
  width:44px; height:44px; border-radius:12px; background:var(--c-primary-100); color:var(--c-primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.ai-era-feature strong{ display:block; font-size:.92rem; color:var(--c-ink); }
.ai-era-feature span{ display:block; font-size:.78rem; color:var(--c-muted); margin-top:4px; line-height:1.4; }

.ai-era-visual{ position:relative; padding:32px 28px 40px 8px; }
.ai-era-visual::before{
  content:""; position:absolute; top:-6%; right:-6%; width:78%; height:78%; z-index:0;
  border-radius:50%; background:var(--c-primary-50);
}
.ai-era-photo{
  position:relative; z-index:1; aspect-ratio:4/4; border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--c-bg-soft);
  display:flex; align-items:center; justify-content:center;
}
/* Cutout photo (transparent PNG) — contain instead of cover so the whole group
   shows without cropping; the soft background fills the letterboxed space. */
.ai-era-photo img{ width:100%; height:100%; object-fit:contain; display:block; }
.ai-float{
  position:absolute; z-index:2; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:14px 16px;
}
.ai-float strong{ display:block; font-size:.82rem; color:var(--c-ink); margin-bottom:10px; }

/* Card 1 — "Dari Insight ke Dampak Nyata" 4-step flow, top-left. */
.ai-float--flow{ top:0; left:0; width:290px; }
.ai-flow-steps{ display:flex; align-items:center; gap:6px; }
.ai-flow-step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:0; }
.ai-flow-step .ic{
  width:32px; height:32px; border-radius:9px; background:var(--c-primary-100); color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
}
.ai-flow-step span{ font-size:.68rem; color:var(--c-muted); font-weight:600; }
.ai-flow-arrow{ color:var(--c-border-strong); flex-shrink:0; }
.ai-flow-progress{ height:4px; border-radius:var(--radius-pill); background:var(--c-border); margin-top:14px; overflow:hidden; }
.ai-flow-progress span{ display:block; height:100%; width:62%; border-radius:var(--radius-pill); background:var(--c-primary); }

/* Card 3 — "Dibangun oleh manusia", right side. */
.ai-float--people{ top:16%; right:-16%; width:210px; }
.ai-float--people ul, .ai-float--focus ul{ display:grid; gap:9px; }
.ai-float--people li, .ai-float--focus li{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--c-body); }
.ai-float--people li .ic, .ai-float--focus li .ic{
  width:24px; height:24px; border-radius:7px; background:var(--c-primary-100); color:var(--c-primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* Card 4 — "Area Fokus Kami", bottom-left (real service areas, not fabricated topics). */
.ai-float--focus{ bottom:6%; left:-12%; width:210px; }

@media (max-width:1180px){
  .ai-float--people{ right:-4%; }
  .ai-float--focus{ left:-2%; }
}
@media (max-width:960px){
  .ai-era-inner{ grid-template-columns:1fr; }
  .ai-era-features{ grid-template-columns:1fr 1fr; }
  .ai-era-visual{ order:-1; }
  .ai-float{ display:none; }
}
@media (max-width:520px){ .ai-era-features{ grid-template-columns:1fr; } }

/* --- Contact page: product/service bundle picker → WhatsApp --- */
.bundle-picker{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:start; margin-top:32px; }
.bundle-picker-col{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  padding:24px; min-height:340px;
}
.bundle-picker-col h3{ font-size:.95rem; margin-bottom:18px; }
.bundle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bundle-group-label{
  grid-column:1/-1; font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--c-muted); margin:10px 0 -2px;
}
.bundle-group-label:first-child{ margin-top:0; }
.bundle-option{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:14px 12px; border:1.5px solid var(--c-border); border-radius:var(--radius-md);
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.bundle-option:hover{ border-color:var(--c-primary-200); background:var(--c-bg-soft); }
.bundle-option input{ position:absolute; opacity:0; width:1px; height:1px; }
.bundle-check{
  width:18px; height:18px; border-radius:5px; border:1.5px solid var(--c-border); background:#fff;
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
}
.bundle-option input:checked ~ .bundle-check{ background:var(--c-primary); border-color:var(--c-primary); }
.bundle-option:has(input:checked){ border-color:var(--c-primary); background:var(--c-primary-50); }
.bundle-ic{
  width:45px; height:45px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff;
}
/* 2026-09-17 (revisi ke-2, per arahan eksplisit): picker produk/layanan
   sebelumnya pakai ikon garis generik (.ic--tower dkk) — diganti pakai
   thumbnail 3D asli yang sama dengan nav/beranda/katalog produk
   (.ic--icon-logo). Background SEMPAT dipaksa putih polos di revisi
   sebelumnya, sekarang DIKEMBALIKAN ke warna pastel per-produk/layanan
   yang sama dengan kartu beranda ("ubah background putih sesuai dengan
   warna yang digunakan di halaman beranda") — lewat --icon-bg yang di-set
   inline di blade (sama seperti nav dropdown/kartu beranda), BUKAN
   dipaksa satu warna. Ukuran juga diperbesar 25% (36px → 45px, radius
   10px → 13px, padding 6px → 8px) per arahan eksplisit "perbesar lagi
   25%". 2-kelas (.bundle-ic.ic--icon-logo) menang atas ".ic--icon-logo"
   generik yang membutuhkan .ic (kelas itu TIDAK dipakai di sini). */
.bundle-ic.ic--icon-logo{
  background:var(--icon-bg, var(--c-primary-100)); border:1px solid rgba(11,19,36,.08); padding:8px; box-sizing:border-box;
}
.bundle-ic.ic--icon-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.bundle-name{ font-size:.82rem; font-weight:600; line-height:1.3; }
@media (max-width:640px){ .bundle-grid{ grid-template-columns:repeat(2,1fr); } }

.bundle-selected-list{ display:grid; gap:2px; min-height:120px; }
.bundle-empty{ color:var(--c-muted); font-size:.85rem; padding:8px 0; }
.bundle-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--c-border); font-size:.88rem; font-weight:600;
}
.bundle-row button{
  background:none; border:none; color:var(--c-muted); font-size:1.2rem; line-height:1; cursor:pointer; padding:2px 6px;
}
.bundle-row button:hover{ color:var(--c-danger); }
.bundle-wa-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:20px;
  background:#25D366; border-color:#25D366;
}
.bundle-wa-btn:hover{ background:#1ebe57; border-color:#1ebe57; }
@media (max-width:860px){ .bundle-picker{ grid-template-columns:1fr; } }

/* --- Halaman 404 --- */
.error-404-illustration{ width:100%; max-width:420px; height:auto; display:block; margin:0 auto 28px; border-radius:var(--radius-lg); }
.error-404-illustration + h1{ font-size:clamp(1.5rem,3vw,2rem); }
.error-404-illustration ~ p{ color:var(--c-body); margin-top:12px; }
.error-404-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

/* =========================================================
   Integrated Command Centre — halaman story-selling khusus (2026-09-15),
   product-military-command-center.blade.php. Hero-nya SEKARANG reuse
   .bpr-hero/.bpr-hero-grid/.bpr-hero-copy/.bpr-hero-icon/.story-device-frame
   apa adanya (sama persis dengan MIA/BPR/GPT) — sempat pakai hero foto
   gelap full-bleed custom (.hero-v2), tapi diganti 2026-09-15 per arahan
   eksplisit user ("perhatikan contoh di media intelligence") karena
   dinilai jelek. Prefix "icc-" yang MASIH dipakai di bawah cuma untuk
   bagian yang benar SPESIFIK halaman ini (strip highlight, "Dua Lini
   Produk", ilustrasi lapisan data, dll) — bukan lagi untuk hero.
   ========================================================= */

/* Strip ringkas kapabilitas, section biasa di bawah hero (bukan lagi kartu
   mengambang di atas foto gelap — hero-nya sekarang terang). */
.icc-highlights{
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
  background:var(--c-bg-soft); border-radius:var(--radius-lg);
  padding:22px 12px;
}
.icc-highlight{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:0 6px; }
/* Badge ikon warna sendiri (bukan reuse kelas ".ic--x" per-produk yang scoped
   ke konteks lain seperti .dropdown-link/.product-card) — supaya konsisten
   & tidak tergantung produk['color'] yang dipakai di tempat lain. */
/* BUG NYATA DITEMUKAN 2026-09-16 (dilaporkan user via screenshot: ikonnya
   kelihatan gelap, bukan putih): elemen <svg> di markup pakai atribut
   presentasi stroke="#fff", tapi path di dalam <symbol> (icons-sprite)
   pakai stroke="currentColor" — currentColor mengikuti CSS `color`
   (cascade normal), BUKAN atribut `stroke` di elemen <svg> luar. Karena
   rule ini tidak pernah menyebut `color`, currentColor jatuh ke warna teks
   default halaman (gelap) — bukan putih seperti yang dimaksud. */
.icc-highlight .ic{ width:40px; height:40px; border-radius:12px; background:var(--c-primary); color:#fff; display:flex; align-items:center; justify-content:center; }
.icc-highlight span{ font-size:.78rem; font-weight:600; color:var(--c-ink); line-height:1.3; }
@media (max-width:760px){
  .icc-highlights{ grid-template-columns:repeat(2,1fr); gap:20px 4px; }
}

/* "Dua Lini Produk" — 2 kartu berdampingan, tiap kartu punya ikon+tagline,
   paragraf, checklist use-case, foto, dan CTA WhatsApp. 2026-09-15: sempat
   diubah jadi 2 baris penuh (bukan berdampingan) karena salah paham arahan
   user ("military command centre jelek banget") dikira soal tata letak
   kartu ini — user lalu mengoreksi: tata letak berdampingan SUDAH BAGUS,
   yang sebenarnya bermasalah adalah hero image (sekarang reuse .bpr-hero,
   lihat blok komentar besar di atas). Dikembalikan ke 2 kartu berdampingan
   seperti semula. */
.icc-dual-head{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; }
.icc-dual-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:40px; }
@media (max-width:860px){ .icc-dual-head{ grid-template-columns:1fr; } .icc-dual-grid{ grid-template-columns:1fr; } }
/* 2026-09-16: dipadatkan lagi per arahan eksplisit user ("teks coba
   padatkan lagi") — padding, spacing, & ukuran font diperkecil supaya
   kartu tidak terasa longgar/renggang (tombol CTA sudah dihapus sebelumnya
   jadi ".icc-dual-card .btn" tidak dipakai lagi, sengaja tidak dihapus
   biar gampang dikembalikan kalau tombolnya dipasang lagi nanti).

   .icc-dual-card jadi flex column + .icc-dual-card-copy{flex:1} (BUKAN
   cuma kosmetik) — ini yang bikin kedua foto "sejajar" (2026-09-16, arahan
   eksplisit user): teks Regional & Military panjangnya tidak akan pernah
   identik persis walau sudah dipersingkat, jadi tinggi bagian teks di atas
   foto tetap bisa sedikit beda. Grid 2-kolom (.icc-dual-grid) sudah
   men-stretch kedua kartu ke tinggi yang SAMA (perilaku default CSS grid,
   align-items:stretch), tapi tanpa flex:1 di wrapper teks, foto akan
   menempel tepat di bawah teksnya masing-masing (beda posisi Y kalau
   teksnya beda panjang). Dengan .icc-dual-card-copy{flex:1}, wrapper teks
   itu yang "menyerap" sisa ruang kosong (bukan foto), sehingga foto selalu
   punya jarak (margin-top) yang SAMA dari wrapper teks di atasnya, DAN
   tepi atas/bawahnya tetap sejajar persis di kedua kartu — beda dari
   margin-top:auto langsung di foto (yang bikin jaraknya jadi 0 kalau
   kartunya kebetulan sama tinggi, tidak konsisten). */
.icc-dual-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:24px; }
.icc-dual-card-copy{ display:flex; flex-direction:column; flex:1; }
.icc-dual-card-ic{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--c-primary-50); color:var(--c-primary); margin-bottom:12px;
}
.icc-dual-card-ic svg{ width:20px; height:20px; }
.icc-dual-card h3{ font-size:1.05rem; }
.icc-dual-card-tagline{ display:block; font-size:.8rem; font-weight:600; color:var(--c-muted); margin-top:2px; }
.icc-dual-card p{ margin-top:8px; color:var(--c-body); font-size:.85rem; line-height:1.55; }
.icc-checklist{ margin-top:12px; display:grid; gap:6px; }
.icc-checklist li{ display:flex; align-items:flex-start; gap:8px; font-size:.82rem; color:var(--c-ink); line-height:1.4; }
.icc-checklist svg{ color:var(--c-success); flex-shrink:0; margin-top:2px; width:14px; height:14px; }
.icc-dual-card .btn{ margin-top:16px; }
/* Foto di bagian bawah tiap kartu, rata dengan tepi kartu (margin negatif +
   border-radius menyatu ke bagian bawah) — angka margin disamakan dengan
   padding kartu (24px) di atas. */
.icc-dual-card-photo{
  margin:16px -24px -24px; border-radius:0 0 var(--radius-lg) var(--radius-lg); overflow:hidden;
  aspect-ratio:16/9;
}
.icc-dual-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Fitur Utama — reuse .value-card (sudah generik, dipakai produk lain
   juga) apa adanya: ".value-card .ic" bawaan sudah kasih badge gradient +
   ikon putih, jadi tidak perlu override di sini. */
.icc-feature-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; margin-top:40px; }
/* BUG NYATA DITEMUKAN 2026-09-15 (lewat pengecekan DOM di lebar mobile,
   bukan cuma screenshot): grid 2 kolom ini awalnya inline-style, tanpa
   breakpoint — di layar sempit (375px) kolomnya tetap berdampingan
   (145px+198px dalam container 327px), kartu fitur & ilustrasi lapisan
   data jadi remuk. Sekarang pakai class supaya bisa di-stack 1 kolom. */
@media (max-width:860px){ .icc-feature-grid{ grid-template-columns:1fr; } }

/* Ilustrasi "lapisan data" generik — CSS murni (bukan foto/gambar aset,
   belum ada dari user), beberapa kartu label bertumpuk dengan sedikit
   offset & shadow, merepresentasikan penggabungan sumber data tanpa
   ilustrasi 3D/peta karangan. */
.icc-layers{ position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:14px; padding:20px 0; }
.icc-layers-item{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:12px 20px; font-size:.85rem; font-weight:600; color:var(--c-ink);
  display:flex; align-items:center; gap:10px;
}
.icc-layers-item svg{ color:var(--c-primary); flex-shrink:0; }
.icc-layers-item:nth-child(1){ margin-right:0; }
.icc-layers-item:nth-child(2){ margin-right:24px; }
.icc-layers-item:nth-child(3){ margin-right:48px; }
.icc-layers-item:nth-child(4){ margin-right:24px; }
.icc-layers-item:nth-child(5){ margin-right:0; }

/* Solusi untuk Berbagai Kebutuhan — 6 ikon dalam 1 baris kartu tipis. */
.icc-usecases{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:32px; }
.icc-usecase{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-md); padding:20px 10px;
}
.icc-usecase .ic{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--c-primary-50); color:var(--c-primary);
}
.icc-usecase span{ font-size:.82rem; font-weight:600; color:var(--c-ink); line-height:1.3; }
@media (max-width:760px){ .icc-usecases{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:761px) and (max-width:1024px){ .icc-usecases{ grid-template-columns:repeat(3,1fr); } }

/* CTA akhir — gradient gelap sama dengan .hero-v2/beranda (bukan foto
   satelit Indonesia karangan, belum ada aset asli — per arahan "generik
   dulu"), dipusatkan. 2026-09-16: dirombak per arahan eksplisit user —
   eyebrow "Langkah Berikutnya" & tagline penutup ('final_sub') dihapus dari
   tampilan (datanya tetap ada di config), jadi tinggal judul+tombol —
   dikompensasi dengan radial glow halus di belakang teks & tombol lebih
   besar supaya tetap terasa "penuh"/tidak kosong meski elemennya lebih
   sedikit, radius kotak disamakan dengan .cta-banner (--radius-xl) yang
   dipakai di seluruh situs supaya konsisten. */
.icc-final-cta{
  background:var(--grad-hero); color:#fff; text-align:center;
  padding-block:clamp(64px,9vw,104px); border-radius:var(--radius-xl);
  overflow:hidden; position:relative;
}
.icc-final-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 0%, rgba(111,214,255,.25) 0%, transparent 60%);
}
.icc-final-cta > *{ position:relative; z-index:1; }
.icc-final-cta h2{ color:#fff; font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1.25; max-width:22ch; margin-inline:auto; }
.icc-final-cta .btn-white{ margin-top:30px; padding:16px 34px; font-size:1rem; }

/* --- Print --- */
@media print{ .site-header, .site-footer, .floating-actions{ display:none; } }