/* Gaya halaman tambahan (kontak, tentang, audit, konsultasi, privasi, katalog, blog).
   Memakai token dari :root di startix.css. Tanpa build: file statis. */

/* Kartu kanal, area, dan langkah awal */
.sx-contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sx-contact-card{background:var(--gray);border-radius:18px;padding:36px 32px;display:flex;flex-direction:column;min-width:0}
.sx-contact-card h3{font-size:22px;margin:0 0 12px}
.sx-contact-card p{margin:0 0 14px;line-height:1.6;overflow-wrap:anywhere}
.sx-contact-value a,.sx-text-action{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.sx-contact-card .button{margin-top:auto;align-self:flex-start}
.sx-contact-card .sx-text-action{margin-top:auto}

/* Daftar bertanda centang */
.sx-check-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sx-check-list li{position:relative;padding:0 0 18px 34px;border-bottom:1px solid var(--line);line-height:1.6}
.sx-check-list li:last-child{border-bottom:0;padding-bottom:0}
.sx-check-list li:before{content:'✓';position:absolute;left:0;top:0;font-weight:600}

/* Area layanan */
.sx-area-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px}
.sx-area-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* Catatan dan indikator */
.sx-notice{background:var(--gray);border-radius:18px;padding:28px 32px;margin-top:24px}
.sx-notice p{margin:0 0 10px;line-height:1.6}
.sx-notice p:last-child{margin-bottom:0}
.sx-indicator{display:block;font-size:14px;color:#49515b;margin:0 0 24px;line-height:1.5}
.sx-field-help{font-size:13px;line-height:1.5;color:#49515b;margin:0}
.sx-message-preview{white-space:pre-line;overflow-wrap:anywhere}

/* Ringkasan galat formulir (aria-live, menerima fokus) */
.sx-form-summary{background:#fff;border:1px solid #a32828;border-radius:18px;padding:22px 26px;margin-bottom:24px;color:#0f0f0f}
.sx-form-summary:focus{outline:3px solid #8274cd;outline-offset:4px}
.sx-form-summary h2{font-size:18px;margin:0 0 10px}
.sx-form-summary ul{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.5}
.sx-form-summary a{color:#a32828;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.field .error{font-size:14px;line-height:1.5}

/* Filter kategori blog */
.sx-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 40px;padding:0}
.sx-chips a,.sx-chips span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:80px;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none}
.sx-chips a:hover{text-decoration:underline}
.sx-chips [aria-current="page"]{background:var(--ink);color:#fff}

/* Kartu artikel */
.sx-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.sx-post-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-width:0;height:100%}
.sx-post-cover{margin:0;aspect-ratio:16/9;background:var(--gray);border-bottom:1px solid var(--line)}
.sx-post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sx-post-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.sx-post-body h2{font-size:21px;line-height:1.3;margin:14px 0 12px;overflow-wrap:anywhere}
.sx-post-body h2 a{color:var(--ink);text-decoration:none}
.sx-post-body h2 a:hover,.sx-post-body h2 a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.sx-post-body>p{margin:0 0 20px;color:#49515b;line-height:1.6}
.sx-post-cat{display:inline-block;width:fit-content;padding:6px 12px;border-radius:30px;background:#e9e9e9;font-size:12px;text-transform:uppercase;font-weight:500}
.sx-post-meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#49515b}

/* Halaman kebijakan privasi */
.sx-privacy h2{font-size:24px;margin:48px 0 14px}
.sx-privacy h2:first-child{margin-top:0}
.sx-privacy p{line-height:1.7;margin:0 0 14px}
.sx-privacy ul{margin:0 0 14px;padding-left:22px;line-height:1.7}
.sx-privacy a{text-decoration:underline;text-underline-offset:3px}
.sx-privacy-meta{font-size:14px;color:#49515b}

/* Katalog aplikasi: label contoh */
.sx-example-label{display:inline-block;width:fit-content;background:#333;color:#fff;border-radius:30px;padding:8px 16px;font-size:13px;font-weight:500;text-transform:uppercase;margin:0 0 20px}

@media(max-width:991px){
  .sx-contact-cards{grid-template-columns:1fr}
  .sx-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .sx-post-grid{grid-template-columns:1fr}
  .sx-contact-card{padding:28px 24px}
  .sx-notice{padding:24px 22px}
  .sx-form-summary{padding:18px 20px}
  .sx-privacy h2{margin-top:36px}
}

/* Teks khusus pembaca layar, tanpa mengubah tampilan visual */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* pricing tiers (PM) */
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;align-items:stretch}
.pt-card{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid #e4e4e4;border-radius:18px;padding:32px}
.pt-card-main{background:#0f0f0f;color:#f5f5f5;border-color:#0f0f0f;box-shadow:0 24px 48px rgba(15,15,15,.18)}
.pt-card-main .pt-scope,.pt-card-main .pt-note,.pt-card-main .pt-from{color:#cfcfcf}
.pt-card-main .pt-list li::before{color:#c1b8ff}
.pt-card-main .button{background:#fff;color:#0f0f0f}
.pt-name{font-family:Poppins,sans-serif;font-size:1.25rem;font-weight:600;margin:0}
.pt-scope{margin:0;color:#555;font-size:.95rem}
.pt-price{display:flex;flex-direction:column;margin:8px 0 4px}
.pt-from{font-size:.85rem;color:#666}
.pt-amount{font-family:Poppins,sans-serif;font-size:2.1rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.pt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.pt-list li{position:relative;padding-left:26px;line-height:1.5}
.pt-list li::before{content:"✓";position:absolute;left:0;color:#5b4ff9;font-weight:700}
.pt-note{margin:0;font-size:.9rem;color:#555;line-height:1.55}
.pt-card .button{align-self:flex-start;margin-top:8px}
.pt-extra{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}
.pt-extra>div{background:#f4f4f4;border-radius:18px;padding:28px}
.pt-extra-price{font-family:Poppins,sans-serif;font-size:1.4rem;font-weight:700;margin:8px 0}
@media (max-width:991px){.pt-grid{grid-template-columns:1fr}.pt-extra{grid-template-columns:1fr}.pt-card{padding:26px}.pt-amount{font-size:1.85rem}}

.pt-amount-text{font-size:1.7rem}

/* W2a */
.sx-hero-alt{margin:22px 0 0}
.sx-hero-alt a{color:#fff;text-underline-offset:4px}
.sx-faq-intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:15px;position:relative;z-index:1}
.sx-faq-intro-actions .button{margin-top:0}
.sx-steps-foot{margin:28px 0 0}
.sx-next-steps{margin:28px 0 0;font-size:15px;line-height:1.6;color:#49515b}
.sx-next-steps a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sx-home-results .sx-lead{max-width:680px;margin:0 0 40px;font-size:18px;line-height:1.65}
.sx-home-results .sx-home-demo h3{font-size:28px;margin:0 0 12px}
.sx-home-results .sx-demo-note{margin:0 0 32px;color:#49515b}
@media(max-width:767px){
  .sx-faq-intro-actions{flex-direction:column;align-items:flex-start}
  .sx-next-steps{font-size:14px}
}
@media(min-width:992px){.sx-home>.sx-section{padding:96px 0}}

/* photos */
.sx-support-art img[src*="/images/foto/"]{width:100%;max-width:440px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px}

/* template examples */
.sx-tpl-section{padding-top:70px}
.sx-tpl-note{margin:0 0 24px;padding:14px 18px;background:#f5f5f5;border-left:3px solid #0f0f0f;border-radius:8px;font-size:15px;line-height:1.55;color:#49515b}
.sx-tpl-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 48px}
.sx-tpl-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #d4d4d4;border-radius:80px;background:#fff;color:#0f0f0f;font-size:14px;font-weight:500;line-height:1.2;transition:background-color .25s,color .25s,border-color .25s}
.sx-tpl-chip:hover{background:#0f0f0f;border-color:#0f0f0f;color:#fff}
.sx-tpl-count{font-size:12px;opacity:.7}
.sx-tpl-grid{display:grid;grid-template-columns:1fr;gap:24px;scroll-margin-top:140px}
.sx-tpl-card[id]{scroll-margin-top:140px}
.sx-tpl-card{display:flex;flex-direction:column;background:#f5f5f5;border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.sx-tpl-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #21272514}
.sx-tpl-art{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#ffffff 0%,#e3e3e3 100%);display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e3e3e3;overflow:hidden}
.sx-tpl-frame{position:absolute;inset:auto 12% 16% 12%;width:76%;height:auto;fill:#fff;stroke:#0f0f0f;stroke-width:2;stroke-linejoin:round;opacity:.85}
.sx-tpl-frame rect[width="60"],.sx-tpl-frame rect[width="92"],.sx-tpl-frame rect[width="78"],.sx-tpl-frame rect[width="36"]{fill:#0f0f0f;stroke:none;opacity:.2}
.sx-tpl-frame rect[width="36"]{opacity:.45}
.sx-tpl-frame line{stroke:#0f0f0f}
.sx-tpl-frame circle{fill:#0f0f0f;stroke:none}
.sx-tpl-initials{position:absolute;top:14px;left:18px;font:700 22px/1 Poppins,Arial,sans-serif;color:#0f0f0f;letter-spacing:-.02em}
.sx-tpl-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 8px}
.sx-tpl-cat{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#49515b;font-weight:600}
.sx-tpl-body h2{font-size:22px;margin:10px 0 8px}
.sx-tpl-body p{font-size:15px;line-height:1.6;color:#49515b;margin:0 0 20px}
.sx-tpl-open{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:12px 20px;border-radius:80px;background:#0f0f0f;color:#fff;font-size:14px;font-weight:600;line-height:1.2;transition:background-color .25s}
.sx-tpl-open:hover{background:#333}
.sx-tpl-arrow{transition:transform .25s}
.sx-tpl-open:hover .sx-tpl-arrow{transform:translate(2px,-2px)}
.sx-tpl-license{margin:18px 26px 24px;padding-top:16px;border-top:1px solid #e3e3e3;font-size:13px;line-height:1.6;color:#49515b}
.sx-tpl-license a{color:#0f0f0f;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sx-tpl-attr-wrap{margin-top:28px}
.sx-tpl-attr{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.sx-tpl-attr caption{text-align:left;font-weight:600;padding-bottom:10px;color:#0f0f0f}
.sx-tpl-attr th,.sx-tpl-attr td{text-align:left;padding:12px 10px;border-bottom:1px solid #e3e3e3;vertical-align:top;color:#0f0f0f}
.sx-tpl-attr thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#49515b}
.sx-tpl-attr tbody th{font-weight:600}
.sx-tpl-attr a{color:#0f0f0f;text-decoration:underline;text-underline-offset:3px}
@media (min-width:600px){.sx-tpl-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.sx-tpl-grid{grid-template-columns:repeat(3,1fr);gap:28px}}
@media (max-width:767px){
  .sx-tpl-attr thead{display:none}
  .sx-tpl-attr,.sx-tpl-attr tbody,.sx-tpl-attr tr,.sx-tpl-attr th,.sx-tpl-attr td{display:block;width:100%}
  .sx-tpl-attr tr{padding:14px 0;border-bottom:1px solid #e3e3e3}
  .sx-tpl-attr th,.sx-tpl-attr td{border:0;padding:4px 0;word-break:break-word}
  .sx-tpl-attr td::before{content:attr(data-label) ": ";font-weight:600;color:#49515b}
}
@media (prefers-reduced-motion:reduce){
  .sx-tpl-card,.sx-tpl-chip,.sx-tpl-open,.sx-tpl-arrow{transition:none!important}
  .sx-tpl-card:hover{transform:none}
  .sx-tpl-open:hover .sx-tpl-arrow{transform:none}
}

/* ==========================================================================
   W4 micro — polesan detail mikro.
   Aturan: durasi 120-240 ms, easing lembut, semua gerak dijaga prefers-reduced-motion,
   progressive enhancement (kelas `.js` dipasang di <head>; tanpa JS halaman tetap benar).
   Satu blok per topik. JS pendamping: public/js/acs-micro.js.
   ========================================================================== */

/* W4 micro: dasar dan detail visual (seleksi teks, accent-color, color-scheme, tap highlight, tipografi, angka harga, anchor) */
html{color-scheme:light;accent-color:#0f0f0f;-webkit-tap-highlight-color:rgba(15,15,15,.08);-webkit-text-size-adjust:100%}
::selection{background:#0f0f0f;color:#fff}
.sx-dark ::selection,.sx-hero ::selection,.sx-cta ::selection,.sx-inner-hero ::selection,.pt-card-main ::selection,.sx-tier--featured ::selection,.sx-lightbox ::selection{background:#fff;color:#0f0f0f}
h3,h4{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
.pt-amount,.pt-extra-price,.sx-tier-from strong,.sx-svc-amount,.sx-svc-amount *{font-variant-numeric:tabular-nums}
:where(main [id]){scroll-margin-top:112px}
main:focus{outline:none}
.skip-link{border:2px solid #0f0f0f;border-radius:12px;color:#0f0f0f;font-weight:600;box-shadow:0 10px 24px #0f0f0f26;transition:top .16s ease}
.skip-link:focus-visible{top:20px}

/* W4 micro: navigasi (tautan aktif, header ringkas saat digulir, cadangan tanpa JS) */
.nav-links>a:not(.button){background:linear-gradient(currentColor,currentColor) no-repeat left calc(50% + .95em)/0 2px;transition:background-size .2s ease,opacity .2s,transform .2s}
.nav-links>a:not(.button):is(:hover,:focus-visible),.nav-links>a[aria-current]:not(.button){background-size:100% 2px}
.nav-cta[aria-current]{box-shadow:0 0 0 2px #fff,0 0 0 4px #0f0f0f}
.site-header{transition:box-shadow .2s ease,top .2s ease}
.nav{transition:min-height .2s ease}
.site-header.is-scrolled{box-shadow:0 14px 28px #2127252e}
@media(min-width:1200px){.site-header.is-scrolled{top:12px}.site-header.is-scrolled .nav{min-height:72px}}
@media(max-width:1199px){
  /* Tanpa JS tombol menu tidak berfungsi: tampilkan tautan langsung di dalam alur halaman. */
  html:not(.js) .site-header{position:relative;top:auto;left:auto;transform:none;width:auto;margin:16px 15px 0;border-radius:28px;clip-path:none}
  html:not(.js) .nav{flex-wrap:wrap;padding:8px 20px 12px;gap:0 20px;min-height:0}
  html:not(.js) .menu-button{display:none}
  html:not(.js) .nav-links{position:static;visibility:visible;transform:none;height:auto;width:100%;overflow:visible;padding:0;flex-direction:row;flex-wrap:wrap;gap:0 18px;font-size:15px;align-items:center;justify-content:flex-start;flex-basis:100%}
  html:not(.js) .nav-cta{margin-top:6px}
}

/* W4 micro: tombol dan tautan (hover, tekan, fokus, disabled, memuat) */
.button{transition:transform .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,opacity .2s ease;-webkit-user-select:none;user-select:none}
.button span[aria-hidden]{transition:transform .2s ease}
@media(hover:hover){.button:hover{box-shadow:0 10px 22px #0f0f0f26}.button:hover span[aria-hidden]{transform:translate(2px,-2px)}}
.button:active{transform:translateY(1px);box-shadow:none}
.button:active span[aria-hidden]{transform:translate(1px,-1px)}
.button:disabled,.button[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.button.is-loading{pointer-events:none;cursor:progress;gap:10px;opacity:.85}
.btn-spinner{width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block}
@media(prefers-reduced-motion:no-preference){.btn-spinner{animation:w4-spin .7s linear infinite}}
@media(prefers-reduced-motion:reduce){.btn-spinner{border-style:dotted}}
@keyframes w4-spin{to{transform:rotate(360deg)}}
.button.is-done{background:#0f0f0f;color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #8274cd;outline-offset:4px}

/* W4 micro: formulir (fokus, galat inline, penghitung karakter) */
.field input,.field select,.field textarea{border-color:#8a8a8a;transition:border-color .2s ease,box-shadow .2s ease}
@media(hover:hover){.field input:hover,.field select:hover,.field textarea:hover{border-color:#0f0f0f}}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#0f0f0f;box-shadow:0 0 0 1px #0f0f0f}
.field [aria-invalid="true"]{border-color:#a32828;box-shadow:0 0 0 1px #a32828}
.field .error{display:block}
.sx-inline-error{animation:w4-fade-in .18s ease-out}
@keyframes w4-fade-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.sx-char-count{display:none}
.js .sx-char-count{display:block;text-align:right;font-size:13px;line-height:1.4;color:#49515b;font-variant-numeric:tabular-nums}
.sx-char-count.is-near{color:#7a4f00}
.sx-char-count.is-over{color:#a32828;font-weight:600}
.sx-quick-form[data-submitting] .field,.sx-quick-form[data-submitting] .field input{cursor:progress}
.sx-form-summary:focus-visible,#quick-form-error:focus-visible,#audit-form-error:focus-visible{outline:3px solid #8274cd;outline-offset:4px}

/* W4 micro: halaman terima kasih (tombol salin, centang gambar-garis) */
.sx-success-mark{display:block;color:#fff;margin:0 0 20px}
.sx-success-mark circle,.sx-success-mark path{stroke-dasharray:100;stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){
  .sx-success-mark circle{animation:w4-draw .6s ease-out both}
  .sx-success-mark path{animation:w4-draw .35s ease-out .5s both}
}
@keyframes w4-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
html:not(.js) [data-copy-target],html:not(.js) [data-copy-value],html:not(.js) .sx-copy-link{display:none}

/* W4 micro: tombol di footer tidak patah baris (panah tetap sebaris dengan teks) */
.site-footer .footer-grid .button{white-space:nowrap;gap:8px;padding-left:20px;padding-right:20px}

/* W4 micro: kartu (layanan, harga, blog, contoh template, proyek contoh) — angkat 2-4 px hanya pada perangkat dengan hover; fokus-dalam setara */
.sx-svc-card,.pt-card,.sx-post-card,.sx-demo-card,.sx-tier,.sx-insight-card,.sx-tpl-card,.card:has(a){transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sx-post-cover{overflow:hidden}
.sx-post-cover img,.sx-demo-shot img,.sx-insight-cover img{transition:transform .24s ease}
@media(hover:hover){
  .sx-svc-card:hover,.pt-card:hover,.sx-post-card:hover,.sx-demo-card:hover,.sx-tier:hover,.sx-insight-card:hover,.sx-tpl-card:hover,.card:has(a):hover,
  .sx-svc-card:focus-within,.pt-card:focus-within,.sx-post-card:focus-within,.sx-demo-card:focus-within,.sx-tier:focus-within,.sx-insight-card:focus-within,.sx-tpl-card:focus-within,.card:has(a):focus-within{transform:translateY(-3px);box-shadow:0 14px 30px #0f0f0f1a}
  .pt-card-main:hover,.pt-card-main:focus-within,.sx-tier--featured:hover,.sx-tier--featured:focus-within{box-shadow:0 28px 56px #0f0f0f40}
  .sx-post-card:hover .sx-post-cover img,.sx-post-card:focus-within .sx-post-cover img,.sx-demo-card:focus-within .sx-demo-shot img,.sx-insight-card:hover .sx-insight-cover img,.sx-insight-card:focus-within .sx-insight-cover img{transform:scale(1.03)}
  .sx-project:hover img,.sx-project:hover svg,.sx-project:hover .sx-project-image,.sx-project:focus-visible .sx-project-image{transform:scale(1.03)}
  .sx-blog-card.group:hover .group-hover\:scale-105,.sx-blog-card.group:focus-within .group-hover\:scale-105{transform:scale(1.03)}
}
.sx-blog-card.group .group-hover\:scale-105{transition-duration:.24s}
.sx-svc-card:has(:focus-visible),.pt-card:has(:focus-visible),.sx-post-card:has(:focus-visible),.sx-demo-card:has(:focus-visible),.sx-tier:has(:focus-visible),.sx-insight-card:has(:focus-visible),.sx-tpl-card:has(:focus-visible){box-shadow:0 14px 30px #0f0f0f1a}

/* W4 micro: FAQ (<details>): panah memutar dan buka/tutup halus bila didukung; teks tetap ada di pohon aksesibilitas */
.faq-list summary{transition:background-color .2s ease,color .2s ease}
@media(hover:hover){.faq-list details:not([open]) summary:hover{background:#ebebeb}}
.faq-list summary:focus-visible{outline-offset:-4px}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .faq-list details{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .24s ease,content-visibility .24s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
}

/* W4 micro: blog (daftar isi aktif, bilah progres baca, tombol salin tautan) */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none}
.reading-progress span{display:block;height:100%;background:#0f0f0f;transform-origin:left;transform:scaleX(var(--progress,0))}
nav[aria-label="Daftar isi"] a{transition:color .2s ease}
nav[aria-label="Daftar isi"] a.is-active{color:#0f0f0f;text-decoration:underline;text-decoration-thickness:2px}
.sx-copy-link{cursor:pointer;min-height:36px}
.sx-copy-link.is-done{background:#0f0f0f;color:#fff}

/* W4 micro: scroll dan elemen melayang (kembali ke atas muncul halus; WhatsApp sudah disembunyikan dekat footer lewat JS) */
.back-top{display:block;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.back-top.visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(hover:hover){.back-top.visible:hover{transform:translateY(-2px)}}
.back-top.visible:active{transform:translateY(1px)}
.wa-float{box-shadow:0 10px 24px #0003,0 0 0 2px #fff}
.wa-float:active{transform:translateY(1px)}

/* W4 micro: beranda dan jarak antar-section lebih ringkas (96 -> 80 px desktop, 56 -> 48 px mobile; CTA global dan footer sedikit dirapatkan) */
@media(min-width:992px){.sx-home>.sx-section,.sx-home>section.sx-section{padding:80px 0}.sx-cta{padding:96px 0}.site-footer{padding-top:80px}}
@media(max-width:767px){.sx-home>.sx-section,.sx-home>section.sx-section{padding:48px 0}.sx-cta{padding:64px 0}.site-footer{padding-top:64px}}

/* W4 micro: kontras tinggi dan warna paksa (tepi tombol dan kartu tetap terlihat) */
@media(forced-colors:active){
  .button,.sx-tpl-open,.menu-button,.back-top,.wa-float,.sx-copy-link{border:1px solid ButtonText}
  .sx-svc-card,.pt-card,.sx-post-card,.sx-demo-card,.sx-tier,.sx-insight-card,.sx-tpl-card,.card,.sx-contact-card{border:1px solid CanvasText}
  a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid Highlight}
  .reading-progress span{background:Highlight}
  .nav-links>a[aria-current]{text-decoration:underline}
}
@media(prefers-contrast:more){
  .field input,.field select,.field textarea{border-color:#0f0f0f}
  .sx-field-help,.help,.sx-indicator,.sx-post-meta,.sx-tier-desc{color:#0f0f0f}
  .sx-post-card,.sx-demo-card,.sx-insight-card,.pt-card{border:1px solid #0f0f0f}
}

/* W4 micro: cetak (/biaya dan artikel blog): tanpa header/footer/WhatsApp, latar putih, URL tautan penting dicetak */
@media print{
  .site-header,.site-footer,.sx-cta,.wa-float,.back-top,.nav-backdrop,.page-load-indicator,.reading-progress,.skip-link,.sx-copy-link,.sx-lightbox,aside[aria-label="Pintasan WhatsApp"]{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  *{animation:none!important;transition:none!important;box-shadow:none!important}
  .sx-inner-hero,.page-hero,.sx-blog-hero{background:#fff!important;color:#000!important;padding:0 0 16px!important}
  .sx-inner-hero h1,.sx-inner-hero p,.sx-inner-hero a,.sx-inner-hero .eyebrow,.sx-blog-hero.sx-inner-hero h1,.sx-blog-hero.sx-inner-hero p,.sx-blog-hero.sx-inner-hero time,.sx-blog-hero.sx-inner-hero .sx-blog-meta,.sx-blog-hero.sx-inner-hero .sx-blog-meta>span{color:#000!important;background:none!important}
  .sx-inner-hero:before{display:none}
  .pt-card-main,.sx-tier--featured{background:#fff!important;color:#000!important;border:1px solid #000!important}
  .pt-card-main *,.sx-tier--featured *{color:#000!important}
  .pt-grid,.pt-extra{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .pt-card,.sx-tier,.sx-post-card,details,figure,blockquote,pre{break-inside:avoid}
  .article-body a[href^="http"]::after,.pt-card a.button::after,.sx-tier a[href]::after,.pt-extra a[href]::after{content:" (" attr(href) ")";font-size:.85em;font-weight:400;word-break:break-all;color:#000}
  .pt-card a.button[href^="/"]::after{content:" (" attr(href) ")"}
  .button{background:none!important;color:#000!important;border:1px solid #000!important}
  .pt-card a.button,.sx-tier a.button{display:block!important;border-radius:12px!important;text-align:left;padding:10px 14px!important}
  .faq-list details>*{display:block!important}
  a{text-decoration:underline}
  main{padding:0!important}
  .sx-blog-section,.section{padding:16px 0!important}
}

/* W4 micro: gerak berkurang — semua transisi/animasi W4 dimatikan; keadaan akhir langsung tampil */
@media(prefers-reduced-motion:reduce){
  .button,.button span[aria-hidden],.skip-link,.site-header,.nav,.nav-links>a:not(.button),.field input,.field select,.field textarea,.sx-inline-error,
  .sx-svc-card,.pt-card,.sx-post-card,.sx-demo-card,.sx-tier,.sx-insight-card,.sx-tpl-card,.card,.sx-post-cover img,.sx-demo-shot img,.sx-insight-cover img,
  .sx-blog-card.group .group-hover\:scale-105,.faq-list summary,.faq-list details::details-content,nav[aria-label="Daftar isi"] a,.back-top,.wa-float{transition:none!important;animation:none!important}
  .sx-svc-card:hover,.pt-card:hover,.sx-post-card:hover,.sx-demo-card:hover,.sx-tier:hover,.sx-insight-card:hover,.sx-tpl-card:hover,.card:has(a):hover,.card:has(a):focus-within,
  .sx-svc-card:focus-within,.pt-card:focus-within,.sx-post-card:focus-within,.sx-demo-card:focus-within,.sx-tier:focus-within,.sx-insight-card:focus-within,.sx-tpl-card:focus-within{transform:none}
  .back-top{transform:none}
}

/* W6b kuis kebutuhan paket: /rekomendasi-paket, tautan di pricing dan beranda */
.quiz-page .quiz-root{max-width:760px}
.quiz-page [hidden]{display:none!important}
.quiz-page .button{min-height:44px}
.quiz-page .help{color:#4b4b4b}
.quiz-form{margin:0}
.quiz-step{border:1px solid #767676;border-radius:16px;padding:24px;margin:0 0 20px;min-width:0;background:#fff}
.quiz-legend{display:block;width:100%;padding:0;margin:0 0 18px}
.quiz-legend:focus-visible,.quiz-result h2:focus-visible{outline:3px solid #8274cd;outline-offset:4px}
.quiz-step-no{display:block;margin-bottom:8px;font:600 13px/1.4 Inter,"ACS Inter fallback",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4b4b4b}
.quiz-q{display:block;font:600 22px/1.3 Poppins,"ACS Poppins fallback",Arial,sans-serif;letter-spacing:-.3px;color:#0f0f0f}
.quiz-options{display:grid;gap:12px}
.quiz-option{display:flex;align-items:center;gap:14px;min-height:52px;padding:12px 16px;border:1px solid #767676;border-radius:12px;background:#fff;color:#0f0f0f;cursor:pointer;font-size:16px;line-height:1.4}
.quiz-option input{width:22px;height:22px;margin:0;flex:none;accent-color:#0f0f0f}
.quiz-option:has(input:checked){border-color:#0f0f0f;box-shadow:inset 0 0 0 1px #0f0f0f;background:#f5f5f5}
.quiz-option:has(input:focus-visible){outline:3px solid #8274cd;outline-offset:3px}
@media(hover:hover){.quiz-option:hover{border-color:#0f0f0f}}
.quiz-inline-error{margin:14px 0 0;color:#a32828;font-weight:600}
.quiz-error{margin:0 0 24px;padding:16px 20px;border-left:4px solid #a32828;border-radius:8px;background:#fbeeee;color:#0f0f0f}
.quiz-error p{margin:0 0 8px}
.quiz-error ul{margin:0;padding-left:20px}
.quiz-error a{color:#0f0f0f;text-decoration:underline}
.quiz-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:8px}
.quiz-nav .button{margin:0}
.quiz-result{padding:36px;border:1px solid #767676;border-radius:20px;background:#fff}
.quiz-result h2{margin:0 0 12px;font-size:32px}
.quiz-price{margin:0 0 20px;font:600 22px/1.3 Poppins,"ACS Poppins fallback",Arial,sans-serif;color:#0f0f0f}
.quiz-items{margin:0 0 24px}
.quiz-reason{margin:0 0 28px;max-width:620px;color:#0f0f0f}
.quiz-actions{gap:12px}
.quiz-actions .button{min-height:44px}
.quiz-disclaimer{margin:20px 0 0}
.quiz-links{margin:20px 0 0}
.quiz-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
.pt-quiz{margin:0 0 32px;color:#0f0f0f}
.pt-quiz a,.sx-tiers-quiz a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline}
.sx-tiers-quiz{margin:24px 0 0;text-align:center;color:#0f0f0f}
@media(max-width:767px){.quiz-step{padding:20px}.quiz-q{font-size:20px}.quiz-result{padding:24px}.quiz-result h2{font-size:26px}.quiz-nav{flex-direction:column-reverse}.quiz-nav .button,.quiz-actions .button{width:100%;justify-content:center}}
/* W6a: banner persetujuan analitik (fixed di bawah; tombol Terima dan Tolak identik), bar CTA mobile, dan penyesuaian tombol melayang. */
.acs-consent{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);width:min(720px,calc(100% - 24px));z-index:60;background:#fff;color:#0f0f0f;border:1px solid #0f0f0f;border-radius:18px;box-shadow:0 12px 32px #0003;padding:16px 18px;opacity:0;transition:opacity .2s ease,transform .2s ease}
.acs-consent[hidden]{display:none}
.acs-consent.is-in{opacity:1;transform:translate(-50%,0)}
.acs-consent:focus{outline:none}
.acs-consent:focus-visible{outline:3px solid #8274cd;outline-offset:3px}
.acs-consent-inner{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.acs-consent-text{flex:1 1 300px;margin:0;font-size:14px;line-height:1.55}
.acs-consent-text a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.acs-consent-current{color:#49515b}
.acs-consent-actions{display:flex;gap:10px;flex:0 0 auto}
.acs-consent-btn{min-height:44px;min-width:104px;padding:10px 22px;border-radius:80px;border:1.5px solid #0f0f0f;background:#fff;color:#0f0f0f;font:600 14px/1.2 Poppins,"ACS Poppins fallback",Arial,sans-serif;cursor:pointer;transition:background .2s ease,color .2s ease}
.acs-consent-btn:hover{background:#0f0f0f;color:#fff}
.acs-mcta{display:none}
/* Tombol melayang diangkat dengan `translate` (bukan bottom) agar tidak dihitung sebagai pergeseran tata letak (CLS). */
@media(max-width:900px){
  html.acs-consent-open body .wa-float{translate:0 calc(-1 * (var(--acs-consent-h,0px) + 4px + env(safe-area-inset-bottom,0px)))}
  html.acs-consent-open body .back-top{translate:0 calc(-1 * max(0px,var(--acs-consent-h,0px) - 22px + env(safe-area-inset-bottom,0px)))}
}
@media(max-width:767px){
  html.acs-consent-open body .wa-float{translate:0 calc(-1 * (var(--acs-consent-h,0px) + 10px + env(safe-area-inset-bottom,0px)))}
  html.acs-consent-open body .back-top{translate:0 calc(-1 * (var(--acs-consent-h,0px) + 4px + env(safe-area-inset-bottom,0px)))}
  html.acs-consent-open body.has-mobile-cta .back-top{translate:0 calc(-1 * max(0px,var(--acs-consent-h,0px) - 60px + env(safe-area-inset-bottom,0px)))}
}
@media(max-width:767px){
  .acs-mcta{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px #0000001a;transform:translateY(100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .acs-mcta.is-visible{transform:none;visibility:visible;transition-delay:0s}
  .acs-mcta-main{flex:1 1 auto;min-height:48px}
  .acs-mcta-wa{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#0f0f0f;color:#fff}
  body.has-mobile-cta aside[aria-label="Pintasan WhatsApp"]{display:none}
  body.has-mobile-cta .back-top{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media(forced-colors:active){.acs-consent,.acs-consent-btn,.acs-mcta,.acs-mcta-wa{border:1px solid ButtonText}}
@media print{.acs-consent,.acs-mcta,.visually-hidden[data-consent-status]{display:none!important}}
@media(prefers-reduced-motion:reduce){.acs-consent,.acs-consent-btn,.acs-mcta{transition:none!important;animation:none!important}.acs-consent{transform:translate(-50%,0)}}
[data-share],.sx-copy-link{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.sx-share-row{flex-wrap:wrap}

/* W6c sumber belajar (/sumber-belajar) dan halaman untuk perusahaan (/untuk-perusahaan) */
.w6c-dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.w6c-dl{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:36px 32px;border-radius:18px;background:#f5f5f5;max-width:560px}
.w6c-dl h3{margin:0;font-size:24px}
.w6c-dl p{margin:0}
.w6c-dl-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#0f0f0f;color:#fff}
.w6c-dl-meta{font-size:14px;color:#4b4b4b;font-weight:500}
.w6c-dl .button{margin-top:8px;min-height:44px}
.w6c-identity{margin:0;display:grid;gap:0}
.w6c-identity>div{display:grid;grid-template-columns:minmax(130px,200px) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line,#e3e3e3)}
.w6c-identity dt{font-weight:600;color:#0f0f0f}
.w6c-identity dd{margin:0;overflow-wrap:anywhere}
.w6c-subhead{font-size:20px;margin:28px 0 16px}
@media(max-width:767px){.w6c-dl{padding:28px 24px}.w6c-identity>div{grid-template-columns:1fr;gap:4px}}
@media print{.w6c-dl .button{display:none!important}}