/* =========================================================
   SHEET TERANG — strategi branding: ritme gelap <-> terang
   Section terang memakai warna brand logo Acode
   (#35b6e6 -> #1a5fb4, navy #0B2B5E) di atas latar biru-putih.
   Pakai: <div class="sheet light"> ...section... </div>
   ========================================================= */
:root { --b-sky: #35b6e6; --b-blue: #1a5fb4; --b-mid: #1f7fd0; --b-navy: #0B2B5E; --b-soft: #eaf3fd; --sheet: #f4f8fd; }

.sheet { position: relative; margin: 0 10px; border-radius: 36px; background: var(--sheet); overflow: hidden; isolation: isolate; }
@media (min-width: 768px) { .sheet { margin: 0 16px; border-radius: 44px; } }
.sheet + .sheet { margin-top: 16px; }
.sheet::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% -260px, transparent 0 139px, rgba(26,95,180,.055) 140px 141px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 900px); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 900px); }
.sheet::after { content: ''; position: absolute; left: 50%; top: -280px; width: 900px; height: 560px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(53,182,230,.16), transparent); }

.light {
  --t-100: #0B1B3A; --t-80: rgba(11,27,58,.82); --t-70: rgba(11,27,58,.72); --t-60: rgba(11,27,58,.62);
  --t-50: rgba(11,27,58,.52); --t-40: rgba(11,27,58,.42); --line: rgba(11,27,58,.08); --line-2: rgba(11,27,58,.14);
  color: var(--t-100);
}
.light > section:first-child, .light > .section:first-child { border-top: 0; }
.sheet > section.wrap:first-child { padding-top: 88px; }
.sheet > section.wrap:last-child { padding-bottom: 96px !important; }
.light .svc-block:first-child { border-top: 0; padding-top: 16px; }
.sheet + section, .sheet + .section { border-top: 0 !important; }
.sheet + section.wrap { padding-top: 96px !important; }

/* Kartu: putih bersih + shadow lembut (pengganti glass) */
.light .liquid-glass { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(11,27,58,.06);
  box-shadow: 0 1px 2px rgba(16,40,90,.04), 0 18px 40px -22px rgba(16,40,90,.18); }
.light .liquid-glass::before { display: none; }
.light .svc-card:hover { background: #fff; box-shadow: 0 1px 2px rgba(16,40,90,.04), 0 28px 50px -24px rgba(26,95,180,.35); }

/* Tipografi & aksen */
.light .grad-text { background: linear-gradient(90deg, var(--b-sky), var(--b-blue)); -webkit-background-clip: text; background-clip: text; }
.light .eyebrow { color: var(--b-blue); background: #fff; padding: 6px 12px 6px 6px; border-radius: 999px; box-shadow: 0 1px 2px rgba(16,40,90,.05), 0 8px 20px -12px rgba(16,40,90,.25); }
.light .eyebrow .dot { width: 22px; height: 22px; background: var(--b-soft); box-shadow: none; position: relative; }
.light .eyebrow .dot::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--b-blue); }
.light .eyebrow .tag { border-color: rgba(26,95,180,.18); color: var(--b-blue); background: var(--b-soft); }
.light .lead strong { color: var(--t-100) !important; }

/* Ikon & chip */
.light .svc-ic { background: var(--b-soft); border: 0; color: var(--b-blue); }
.light .svc-card:hover .more { color: var(--b-blue); }
.light .chip { background: #fff; border-color: var(--line); color: var(--t-70); box-shadow: 0 1px 2px rgba(16,40,90,.04); }
.light .chip [data-lucide] { color: var(--b-blue); }
.light .cat-pill { background: rgba(11,27,58,.05); color: var(--t-80); }

/* Tombol */
.light .btn-white { background: linear-gradient(135deg, #2f9fe0, var(--b-blue)); color: #fff; box-shadow: 0 12px 26px -12px rgba(26,95,180,.75); }
.light .btn-white:hover { background: linear-gradient(135deg, #3aa8e8, #1d68c4); }
.light .btn-outline { background: #fff; border-color: var(--line-2); color: var(--t-100); }
.light .btn-outline:hover { background: var(--b-soft); }

/* Tab 3 langkah (gambar 2) */
.light .step-tab { opacity: .6; }
.light .step-tab.on { background: var(--sheet); box-shadow: inset 0 0 0 1px rgba(26,95,180,.12); opacity: 1; }
.light .step-tab .si { background: var(--b-soft); color: var(--b-blue); }
.light .sp-visual { background: radial-gradient(420px circle at 30% 30%, rgba(53,182,230,.14), transparent 70%), #f7faff; }
.light .sp-visual::before { border-color: rgba(26,95,180,.08); box-shadow: 0 0 0 60px rgba(26,95,180,.025), 0 0 0 120px rgba(26,95,180,.018); }
.light .sp-card { background: #fff; }
.light .sp-card .ic { background: var(--b-soft); color: var(--b-blue); }
.light .sp-line { background: #edf2f9; }
.light .sp-text li [data-lucide] { color: var(--b-blue); }

/* Visual layanan / produk di atas kartu putih */
.light .vis-row { background: #f6f9fe; border-color: var(--line); }
.light .vis-row .ic { background: var(--b-soft); color: var(--b-blue); }
.light .ok { color: #059669; }
.light .warn { color: #d97706; }
.light .vis-row .r[style*="ice"] { color: var(--b-blue) !important; }
.light .bar { background: rgba(11,27,58,.08); }
.light .bar i { background: linear-gradient(90deg, var(--b-sky), var(--b-blue)); }
.light .code-win { background: #0b1322; border: 0; box-shadow: 0 20px 40px -20px rgba(11,27,58,.5); }
.light .code-win .bar-t { border-bottom-color: rgba(255,255,255,.08); }
.light .code-win .bar-t span { color: rgba(255,255,255,.4); }
.light .code-win pre { color: rgba(255,255,255,.75); }
.light .vision-frame { border: 0; box-shadow: 0 20px 40px -20px rgba(11,27,58,.5); }
.light .pos-map { background: linear-gradient(160deg, #f8fbff, #eef4fc); border-color: var(--line); }
.light .pos-map::before, .light .pos-map::after { background: rgba(11,27,58,.12); }
.light .pm-dot { background: #fff; color: var(--t-70); box-shadow: 0 6px 16px -10px rgba(16,40,90,.4); }
.light .pm-dot.you { background: linear-gradient(135deg, var(--b-sky), var(--b-blue)); color: #fff; box-shadow: 0 10px 24px -8px rgba(26,95,180,.7); }
.light .node { background: #fff; border-color: var(--line); box-shadow: 0 8px 20px -12px rgba(16,40,90,.3); }
.light .node.hub { color: #fff; background: linear-gradient(135deg, var(--b-sky), var(--b-blue)); border: 0; box-shadow: 0 14px 30px -12px rgba(26,95,180,.6); }
.light .team-grid .p { background: #f6f9fe; border-color: var(--line); }
.light .svc-visual { background: radial-gradient(500px circle at 80% 0%, rgba(53,182,230,.12), transparent 60%), #fff; }
.light .sub-item { background: #fff; border-color: var(--line); }
.light .sub-item [data-lucide] { color: var(--b-blue); }
.light .svc-block .tagline { color: var(--b-blue); }
.light .prod-screen { background: #f6f9fe; border-color: var(--line); }
.light .prod-screen .k { background: #fff; box-shadow: 0 1px 2px rgba(16,40,90,.05); }
.light .prod li [data-lucide] { color: var(--b-blue); }

/* Statistik, timeline, FAQ */
.light .stats { background: var(--line); box-shadow: 0 18px 40px -22px rgba(16,40,90,.18); }
.light .stat { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.light .stat .n { background: linear-gradient(90deg, var(--b-navy), var(--b-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.light .tl-dot { background: #fff; color: var(--t-80); box-shadow: 0 6px 16px -8px rgba(16,40,90,.3); }
.light .tl-item.on .tl-dot { color: #fff; }
.light .tl-card .dur { background: var(--b-soft); color: var(--b-blue); }
.light .faq details[open] summary [data-lucide] { color: var(--b-blue); }
.light .logo-cloud span:hover { color: var(--b-blue); }
.light .testi .co { color: var(--b-blue); }

/* Blog & form */
.light .cat-filter button { background: #fff; }
.light .cat-filter button:hover { color: var(--t-100); }
.light .cat-filter button.on { background: var(--b-blue); color: #fff; border-color: var(--b-blue); }
.light .search-box { background: #fff; }
.light .search-box input { color: var(--t-100); }
.light .pager button { background: #fff; }
.light .pager button.on { background: var(--b-blue); color: #fff; }
.light .post-card:hover .go { color: var(--b-blue); }
.light .skeleton { background: linear-gradient(90deg, #edf2f9, #f8fbff, #edf2f9); background-size: 200% 100%; }
.light .empty { background: #fff; }
.light .empty code { background: var(--b-soft); padding: 1px 6px; border-radius: 6px; }
.light .input { background: #fff; color: var(--t-100); border-color: var(--line-2); }
.light .input:focus { border-color: rgba(26,95,180,.5); box-shadow: none; }
.light select.input option { background: #fff; }
.light .form-msg.ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.light .form-msg.err { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.light .prose { color: var(--t-80); }
.light .prose h2, .light .prose h3, .light .prose strong { color: var(--t-100); }
.light .prose a { color: var(--b-blue); }
.light .prose li::marker { color: var(--b-blue); }
.light .prose blockquote { color: var(--b-navy); border-left-color: var(--b-blue); background: linear-gradient(90deg, var(--b-soft), transparent); }
.light .prose code { background: var(--b-soft); }
.light .share button, .light .share a { background: #fff; }
.light .share button:hover, .light .share a:hover { color: var(--b-blue); background: var(--b-soft); }
.light .marquee-track span { color: rgba(11,27,58,.35); }
.light .marquee-track span:hover { color: var(--b-blue); }
.light .nodes > svg line { stroke: rgba(26,95,180,.35); }