/* v2 — fondasi bersama halaman dalam (selaras beranda v2). Dimuat di semua halaman kecuali beranda. */
:root{--v2-wrap:1360px;--r-xl:28px;--r-lg2:20px;--shadow-navy:0 30px 60px -30px rgba(4,54,102,.45);--ease-spring:cubic-bezier(.34,1.4,.64,1);--ease-sheet:cubic-bezier(.65,0,.15,1);--ease-nudge:cubic-bezier(.32,.72,0,1);--ease-expo:cubic-bezier(.16,1,.3,1)}
.x-wrap{width:100%;max-width:calc(var(--v2-wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* Tipografi */
.x-kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bright)}
.x-kicker::before{content:"";width:28px;height:2px;background:var(--sky)}
.x-kicker--light{color:var(--light)}
.x-h1{font-size:clamp(2.5rem,6.6vw,5.8rem);font-weight:800;line-height:.98;letter-spacing:-.05em;color:var(--navy);max-width:16ch;text-wrap:balance;overflow-wrap:normal}
.x-h2{font-size:clamp(2rem,4.2vw,3.75rem);font-weight:800;line-height:1.02;letter-spacing:-.04em;color:var(--navy);max-width:18ch;text-wrap:balance;overflow-wrap:normal}
.x-h3{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--navy)}
.x-h1 em,.x-h2 em,.x-h3 em{font-style:normal;color:var(--bright)}
.x-body{margin-top:20px;font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.65;color:var(--ink-2);max-width:56ch}
.x-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}

/* Tombol & tautan */
.x-pill{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:8px 8px 8px 24px;border-radius:var(--r-pill);background:var(--navy);color:var(--white);font-weight:600;font-size:.9375rem;text-decoration:none;transition:background .3s var(--ease-out),transform .2s}
.x-pill__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--white);color:var(--navy);transition:transform .5s var(--ease-nudge),background .3s,color .3s}
.x-pill:hover{background:var(--bright);color:var(--white)}
.x-pill:hover .x-pill__ic{transform:translate(2px,-1px) scale(1.05)}
.x-pill:active{transform:scale(.98)}
.x-pill--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.x-pill--ghost .x-pill__ic{background:var(--navy);color:var(--white)}
.x-pill--ghost:hover{background:var(--navy);color:var(--white)}
.x-pill--ghost:hover .x-pill__ic{background:var(--white);color:var(--navy)}
.x-pill--white{background:var(--white);color:var(--navy)}
.x-pill--white .x-pill__ic{background:var(--navy);color:var(--white)}
.x-pill--white:hover{background:var(--light);color:var(--navy)}
.x-pill--light{background:rgba(254,254,254,.1);color:var(--white);box-shadow:inset 0 0 0 1px rgba(254,254,254,.35)}
.x-pill--light:hover{background:var(--white);color:var(--navy)}
.x-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--navy);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;transition:background-size .35s var(--ease-out)}
.x-link:hover{background-size:0 1px;background-position:100% calc(100% - 8px)}
.x-link--light{color:var(--white)}

/* Banner hero halaman dalam (foto penuh + scrim navy; varian polos navy bila tanpa foto) */
.x-banner{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(440px,68svh,720px);margin-top:calc(var(--header-h)*-1);padding:calc(var(--header-h) + 48px) 0 48px;color:var(--white);background:radial-gradient(120% 90% at 85% 0%,var(--royal) 0%,var(--navy) 62%);overflow:hidden;isolation:isolate}
.x-banner__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.x-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,54,102,.94) 0%,rgba(4,54,102,.6) 42%,rgba(4,54,102,.2) 75%,rgba(4,54,102,.5) 100%)}
.x-banner--plain::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(to right,rgba(225,240,248,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(225,240,248,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)}
.x-banner__ghost{position:absolute;right:-.04em;bottom:-.18em;z-index:-1;margin:0;font-size:clamp(5rem,20vw,20rem);font-weight:900;line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(254,254,254,.18);white-space:nowrap;pointer-events:none}
.x-banner .c-breadcrumbs,.x-banner .c-breadcrumbs a,.x-banner .c-breadcrumbs span{color:var(--light)}
.x-banner .x-h1{color:var(--white)}
.x-banner .x-h1 em{color:var(--sky)}
.x-banner .x-body{color:var(--light)}
.x-banner__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.x-banner__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.x-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:var(--r-pill);background:rgba(254,254,254,.12);box-shadow:inset 0 0 0 1px rgba(254,254,254,.28);color:var(--white);font-size:.8125rem;font-weight:600}
@media (min-width:1024px){.x-banner{padding-bottom:72px}}

/* Header di atas banner: aturannya ada di chrome.css (satu sumber untuk beranda dan halaman dalam). */

/* Bagian & reveal */
.x-section{padding-block:80px}
.x-section--soft{background:var(--bg-soft)}
.x-section--navy{background:radial-gradient(120% 80% at 85% 0%,var(--royal) 0%,var(--navy) 60%);color:var(--white)}
.x-section--navy .x-h2{color:var(--white)}
.x-section--navy .x-h2 em{color:var(--sky)}
.x-section--navy .x-body{color:var(--light)}
@media (min-width:1024px){.x-section{padding-block:120px}}
@media (prefers-reduced-motion:no-preference){
	.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
	.js [data-reveal].is-in{opacity:1;transform:none}
	.js .x-banner__img{animation:x-settle 2.2s var(--ease-out) both}
	@keyframes x-settle{from{transform:scale(1.08)}to{transform:none}}
}

/* Wadah dua lapis (double bezel): cangkang tipis + inti berradius konsentris. Untuk kartu/form/media utama saja. */
.x-bezel{--bz:7px;padding:var(--bz);border-radius:var(--r-xl);background:rgba(4,54,102,.04);box-shadow:inset 0 0 0 1px rgba(4,54,102,.08)}
.x-bezel--dark{background:rgba(254,254,254,.06);box-shadow:inset 0 0 0 1px rgba(254,254,254,.14)}
.x-bezel > .x-bezel__core{border-radius:calc(var(--r-xl) - var(--bz));box-shadow:inset 0 1px 0 rgba(254,254,254,.85),0 1px 2px rgba(4,54,102,.06),0 24px 48px -32px rgba(4,54,102,.45)}
.x-bezel--dark > .x-bezel__core{box-shadow:inset 0 1px 0 rgba(254,254,254,.16),0 24px 48px -28px rgba(4,54,102,.7)}

/* Koreografi gerak (hanya transform/opacity; mati di reduced-motion). Varian data-reveal: left, draw, zoom, soft; grup: [data-stagger] + --i */
@media (prefers-reduced-motion:no-preference){
	.js [data-reveal=left]{transform:translateX(-28px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
	.js [data-reveal=draw]{opacity:1;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease-expo)}
	.js [data-reveal=zoom]{transform:scale(1.06);transition:opacity 1s var(--ease-out),transform 1.4s var(--ease-expo)}
	.js [data-reveal=soft]{transform:translateY(12px);filter:blur(6px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),filter .6s var(--ease-out)}
	.js [data-reveal=soft].is-in{filter:none}
	.js [data-stagger] > [data-reveal]{transition-delay:calc(var(--i,0) * 70ms + .1s)}
	.js [data-stagger] > [data-reveal].is-done{transition-delay:0s}
	.js .x-words .x-w > span{display:inline-block;transform:translateY(108%);animation:x-rise .9s var(--ease-expo) both;animation-delay:calc(.15s + var(--i,0) * 60ms)}
	.js .x-banner .x-kicker{animation:x-slide .5s var(--ease-out) .1s both}
	.js .x-banner .x-body,.js .x-banner .x-banner__meta,.js .x-banner .x-banner__actions,.js .x-banner__search{animation:x-fade .8s var(--ease-out) .55s both}
	.js .x-banner__ghost{animation:x-fade 1.6s var(--ease-out) .3s both}
	@keyframes x-rise{to{transform:none}}
	@keyframes x-slide{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
	@keyframes x-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
.x-words .x-w{display:inline-block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:bottom}
.x-rule{display:block;height:1px;background:var(--navy)}

/* Pita ajakan v2 .x-cta (template-parts/x-cta.php): Artikel, Layanan, FAQ, alat */
.x-cta{padding-block:96px;background:radial-gradient(120% 90% at 85% 0%,var(--royal) 0%,var(--navy) 62%);color:var(--white);overflow:hidden}
.x-cta__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.x-cta__title{color:var(--white)}
.x-cta__title em{color:var(--sky)}
.x-cta .x-body{color:var(--light)}
.x-cta__orb{position:relative;justify-self:start;display:grid;place-items:center;width:150px;height:150px;border-radius:50%;color:var(--white);text-decoration:none}
.x-cta__ring{position:absolute;inset:0;width:100%;height:100%;fill:var(--white);font-size:9.6px;font-weight:600;letter-spacing:.2em}
.x-cta__core{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:var(--sky);color:var(--navy);transition:transform .5s var(--ease-nudge)}
.x-cta__orb:hover .x-cta__core{transform:translate(3px,-2px) scale(1.08)}
@media (min-width:1024px){.x-cta{padding-block:140px}.x-cta__grid{grid-template-columns:minmax(0,1fr) auto;gap:80px}.x-cta__orb{width:200px;height:200px}.x-cta__core{width:104px;height:104px}}
@media (prefers-reduced-motion:no-preference){.x-cta__ring{animation:x-spin 18s linear infinite}@keyframes x-spin{to{transform:rotate(360deg)}}}
@media print{.x-cta{display:none!important}}
/* Varian terang (tone=soft) agar tidak menyatu dengan footer navy: Layanan, FAQ, alat */
.x-cta--soft{position:relative;background:var(--bg-soft);color:var(--navy);isolation:isolate}
.x-cta--soft::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(to right,rgba(4,54,102,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(4,54,102,.06) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(to right,transparent,#000 70%);mask-image:linear-gradient(to right,transparent,#000 70%)}
.x-cta--soft .x-kicker--light{color:var(--bright)}
.x-cta--soft .x-cta__title{color:var(--navy)}
.x-cta--soft .x-cta__title em{color:var(--bright)}
.x-cta--soft .x-body{color:var(--ink-2)}
.x-cta--soft .x-pill--white{background:var(--navy);color:var(--white)}
.x-cta--soft .x-pill--white .x-pill__ic{background:var(--white);color:var(--navy)}
.x-cta--soft .x-pill--white:hover{background:var(--bright)}
.x-cta--soft .x-link--light{color:var(--navy)}
.x-cta--soft .x-cta__orb{color:var(--navy)}
.x-cta--soft .x-cta__ring{fill:var(--navy)}
.x-cta--soft .x-cta__core{background:var(--navy);color:var(--white)}
.x-cta__orb:hover,.x-cta__orb:focus-visible{color:var(--white)}