/* =====================================================================
   scene.css — "scene kit" ilustrasi landing karyawan.id.
   Hero, 4 fitur, dan 4 cara-kerja dibangun dari lapisan HTML/CSS
   (parts/scene-kit.php) supaya tiap bagian bisa dianimasikan terpisah.

   Satuan: 1em = 1 unit kanvas. Ukuran kanvas via --w/--h pada .sc; skala
   mengikuti lebar kontainer (container units cqw), fallback JS (scene.js).
   Ponsel = 696×1140 unit; kanvas "px" (fitur) memakai piksel PNG asli.
   ATURAN: pada elemen yang punya font-size Nem, jarak em lain ikut terkalikan
   → jarak ditaruh di pembungkus, atau ditulis calc(Xem / N).
   ===================================================================== */
.landing-page-desktop .hero-section .image-container,
.landing-page-desktop .feature .image-container,
.landing-page-desktop .how-it-work-container .main-image-container { container-type: inline-size; }


.sc { position: relative; display: block; width: 100%; aspect-ratio: var(--w) / var(--h);
      font-size: calc(100cqw / var(--w)); font-family: 'Montserrat', sans-serif; line-height: 1;
      color: #343434; user-select: none; overflow: hidden; --r: 44em; --p: 36em; --sh: 1; --bw: 3em; }
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc--px  { --r: 26em; --p: 22em; --sh: .8; --bw: 2em; overflow: visible; }
.sc-stack { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); }
.sc-stack .sc { position: absolute; inset: 0; height: 100%; opacity: 0; visibility: hidden; transform: scale(.985);
                transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .4s; }
.sc-stack .sc.sc-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---- blok dasar ---- */
.sc-t { display: block; line-height: 1.15; white-space: nowrap; font-weight: 700; color: #343434; }
.sc-t.m { font-weight: 500; }
.sc-t.g { font-weight: 400; color: #6B6B6B; }
.sc-t.g2 { font-weight: 400; color: #9A9A9A; }
.sc-t.r { color: #CF3A4A; }
.sc-t.w { color: #fff; }
.sc-t.x { color: inherit; font-weight: 600; }
.sc-row { display: flex; align-items: center; }
.sc-col { display: flex; flex-direction: column; }
.sc-place { position: absolute; }
.sc-scale { position: relative; }

.sc-badge { position: relative; z-index: 1; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
            display: grid; place-items: center; color: #fff; }
.sc-badge svg { width: 46%; height: 46%; }
.sc-badge--sq { border-radius: 24%; }
.sc-badge--orange { background: #FF7253; box-shadow: 0 calc(var(--s) * .15) calc(var(--s) * .3) calc(var(--s) * -.1) rgba(255, 114, 83, .75); }
.sc-badge--green  { background: #40A568; box-shadow: 0 calc(var(--s) * .15) calc(var(--s) * .3) calc(var(--s) * -.1) rgba(64, 165, 104, .7); }
.sc-badge--red    { background: #CF3A4A; }

.sc-pill { display: flex; align-items: center; justify-content: center; border-radius: 999em; border: var(--bw) solid currentColor; flex: none; }
.sc-pill--orange { color: #FF7253; } .sc-pill--green { color: #40A568; }
.sc-pill i { display: inline-flex; flex: none; } .sc-pill i svg { width: 100%; height: 100%; }

.sc-card { position: absolute; background: #fff; border-radius: var(--r); overflow: hidden;
           box-shadow: 0 calc(34em * var(--sh)) calc(70em * var(--sh)) calc(-24em * var(--sh)) rgba(17, 24, 39, .28),
                       0 calc(10em * var(--sh)) calc(24em * var(--sh)) calc(-12em * var(--sh)) rgba(17, 24, 39, .14); }
.sc-in { position: absolute; inset: 0; padding: var(--p); display: flex; flex-direction: column; }
.sc-arcs { position: absolute; right: -50em; top: -50em; width: 100em; height: 100em; border-radius: 50%; z-index: 0;
           box-shadow: 0 0 0 2em #E6E6E6, 0 0 0 42em #fff, 0 0 0 44em #E6E6E6, 0 0 0 84em #fff, 0 0 0 86em #E6E6E6,
                       0 0 0 126em #fff, 0 0 0 128em #E6E6E6, 0 0 0 168em #fff, 0 0 0 170em #E6E6E6; }
.sc-card--clock .sc-t { position: relative; z-index: 1; }
.sc-box { border: 2em solid #D6D6D6; border-radius: 36em; padding: 26em 30em; }
.sc-cash { width: 100%; height: 136em; border-radius: 36em; background: #40A568; display: grid; place-items: center; flex: none; --cs: 84em; }
.sc-cash--small { height: 108em; --cs: 66em; }
.sc-cash i { width: var(--cs); height: var(--cs); border-radius: 50%; background: #fff; color: #40A568; display: grid; place-items: center; font-style: normal; }
.sc-cash i::before { content: "$"; font-weight: 800; font-size: calc(var(--cs) * .7); line-height: 1; }
.sc-cash--orange { background: #FF7253; }
.sc-cash--orange i { background: transparent; color: #fff; border-radius: 0; }
.sc-cash--orange i::before { content: none; }
.sc-cash--orange i svg { width: 100%; height: 100%; }
.sc-key { font-size: 30em; width: calc(52em / 30); height: calc(58em / 30); border-radius: calc(10em / 30); background: #EEF0F5;
          display: grid; place-items: center; font-weight: 700; color: #343434; }
.fx-blur { filter: blur(5em); transition: filter .6s ease; }
.feature:hover .fx-blur { filter: blur(2em); }   /* hover: latar "fokus" sedikit */

/* ---- cincin latar (hero) ---- */
.sc-rings i { position: absolute; left: 640em; top: 790em; border: 2em solid #E2E4EB; border-radius: 50%; transform: translate(-50%, -50%); opacity: .9; }
.sc-rings i:nth-child(1) { width: 1060em; height: 1060em; }
.sc-rings i:nth-child(2) { width: 1300em; height: 1300em; }
.sc-rings i:nth-child(3) { width: 1540em; height: 1540em; }
.sc-rings i:nth-child(4) { width: 1780em; height: 1780em; }
.sc-rings i:nth-child(5) { width: 2020em; height: 2020em; }

/* ---- ponsel ---- */
.ph { position: relative; width: 696em; height: 1140em; background: #161616; border-radius: 98em; padding: 16em;
      box-shadow: inset 0 0 0 3em #5a5a5a, inset 0 0 0 7em #101010, 0 40em 80em -30em rgba(17, 24, 39, .45); }
.ph::before { content: ""; position: absolute; left: -6em; top: 250em; width: 6em; height: 110em; background: #2a2a2a; border-radius: 3em 0 0 3em; }
.ph-screen { position: relative; width: 100%; height: 100%; background: #F6F6F8; border-radius: 82em; overflow: hidden; }
.ph-notch { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 252em; height: 74em; background: #161616; border-radius: 0 0 44em 44em; z-index: 4; }
.ph-notch::before { content: ""; position: absolute; left: 50%; top: 12em; transform: translateX(-50%); width: 96em; height: 12em; border-radius: 6em; background: #2e2e2e; }
.ph-notch::after  { content: ""; position: absolute; left: 50%; top: 30em; transform: translateX(-30em); width: 30em; height: 30em; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2c3e55, #0b1220 70%); }
.ph-status { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; height: 106em; padding: 40em 52em 0 56em; }
.ph-status b { font-size: 30em; font-weight: 700; color: #111; }
.ph-status svg { height: 30em; width: auto; }
.scr { position: absolute; inset: 0; padding-top: 106em; overflow: hidden; display: flex; flex-direction: column; }
.scr-head { padding: 44em 44em 0; position: relative; z-index: 2; flex: none; }
.scr-title { margin: 0; font-family: 'Montserrat Alternates', 'Montserrat', sans-serif; font-weight: 700; font-size: 62em; line-height: 1.1; color: #CF3A4A; }
.scr-sub { margin: calc(10em / 30) 0 0; font-size: 30em; font-weight: 500; line-height: 1.3; color: #343434; text-align: left; }
/* varian "bare" (latar buram fitur): tanpa ponsel/judul, hanya panelnya */
.scr--bare { position: relative; inset: auto; padding-top: 0; width: 664em; overflow: visible; }
.scr--bare .scr-head { display: none; }

/* ---- layar absen ---- */
.ab-panel { position: absolute; left: 0; right: 0; top: 300em; bottom: -40em; z-index: 1; background: #fff; border-radius: 44em 44em 0 0; padding: 0 44em;
            box-shadow: 0 -10em 30em -20em rgba(17, 24, 39, .12); }
.ab-tabrow { display: none; }
.ab-tab { display: grid; place-items: center; height: 106em; padding: 0 44em; background: #8E8E8E; border-radius: 44em 0 40em 0; }
.ab-cal { width: 30em; height: 30em; color: #343434; display: inline-flex; }
.ab-date { margin-top: 50em; text-align: center; }
.ab-date span { font-size: 27em; font-weight: 500; color: #7a7a7a; }
.ab-clock { margin-top: 44em; display: flex; justify-content: center; align-items: baseline; gap: 10em; }
.ab-clock b { font-size: 104em; font-weight: 800; color: #CF3A4A; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ab-clock small { font-size: 46em; font-weight: 600; color: #6B6B6B; display: inline-block; transform-origin: left center; }
.ab-divider { height: 2em; background: #DADADA; margin: 34em 0 14em; }
.ab-shift { display: flex; justify-content: flex-end; align-items: center; }
.ab-shift span { font-size: 27em; font-weight: 500; color: #8a8a8a; display: inline-flex; align-items: center; gap: .3em; }
.ab-jam { display: none; }
.ab-jam i { width: 1em; height: 1em; display: inline-flex; }
.ab-progress { margin-top: 32em; height: 70em; border-radius: 35em; background: #F3EDED; overflow: hidden; }
.ab-progress i { display: block; height: 100%; width: 23%; border-radius: 35em; background: #D9505E; }
.ab-info { display: flex; gap: 14em; margin-top: 40em; align-items: flex-start; }
.ab-info span { flex: none; font-size: 18em; width: calc(26em / 18); height: calc(26em / 18); border: calc(2em / 18) solid #9a9a9a; border-radius: 50%;
                color: #9a9a9a; font-weight: 700; display: grid; place-items: center; margin-top: calc(4em / 18); font-style: normal; }
.ab-info p { margin: 0; font-size: 24em; line-height: 1.4; color: #9a9a9a; text-align: left; }
.ab-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 22em; margin-top: 36em; }
.ab-btns span { font-size: 30em; height: calc(90em / 30); border-radius: calc(26em / 30); background: #CF3A4A; color: #fff; display: grid; place-items: center; font-weight: 700; }
.ab-forgot { display: flex; justify-content: space-between; margin-top: calc(36em / 26); font-size: 26em; }
.ab-forgot span { color: #9a9a9a; font-weight: 500; }
.ab-forgot b { color: #CF3A4A; font-weight: 600; }
.ab-history { display: none; }
/* varian tab "Jumat" (fitur 1 & CTA): panel jadi kartu, ada riwayat di bawah */
.scr-absen--tab .ab-panel { position: relative; top: auto; bottom: auto; flex: none; margin: 40em 30em 0; border-radius: 44em; padding-bottom: 44em;
                            box-shadow: 0 20em 50em -30em rgba(17, 24, 39, .2); }
.scr-absen--tab .ab-tabrow { display: flex; justify-content: space-between; align-items: center; margin: 0 -44em; }
.scr-absen--tab .ab-date { display: none; }
.scr-absen--tab .ab-clock { margin-top: 30em; }
.scr-absen--tab .ab-shift { justify-content: space-between; }
.scr-absen--tab .ab-jam { display: inline-flex; }
.scr-absen--tab .ab-history { display: flex; justify-content: space-between; align-items: center; margin: 40em 44em 0; }
.scr--bare .ab-panel { margin: 0; box-shadow: none; }
.scr--bare .ab-history { display: none; }

/* ---- layar cuti ---- */
.cu-card { margin: 32em 48em 0; flex: none; background: #fff; border-radius: 44em; padding: 36em 47em 28em; display: flex; flex-direction: column; gap: 30em;
           box-shadow: 0 20em 50em -30em rgba(17, 24, 39, .18); }
.cu-box { flex: none; width: 167em; height: 130em; border-radius: 24em; background: #EEF0F5; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cu-btn { margin-top: 30em; height: 93em; border-radius: 26em; background: #CF3A4A; display: flex; align-items: center; justify-content: center; gap: 14em; color: #fff; }
.cu-btn i { width: 32em; height: 32em; display: inline-flex; }
.cu-empty { margin-top: 30em; display: flex; flex-direction: column; align-items: center; gap: 14em; }
.cu-illus { position: relative; width: 262em; height: 256em; flex: none; }
.cu-illus::before { content: ""; position: absolute; left: 13em; top: 20em; width: 236em; height: 236em; border-radius: 50%; background: #EEF0F5; }
.cu-illus svg { position: absolute; left: 58em; top: 16em; width: 200em; height: 226em; transform: rotate(-10deg); }
.cu-illus b { position: absolute; font-size: 34em; left: calc(22em / 34); top: calc(24em / 34); width: calc(66em / 34); height: calc(66em / 34); border-radius: 50%;
              background: #CF3A4A; color: #fff; display: grid; place-items: center; font-weight: 700; box-shadow: 0 .2em .5em rgba(207, 58, 74, .35); }
.scr--bare .cu-card { margin: 0; box-shadow: none; }
.scr--bare .cu-h, .scr--bare .cu-empty { display: none; }

/* ---- layar slip gaji ---- */
.sl-company { margin: 40em 44em 0; flex: none; background: #fff; border-radius: 30em; padding: 26em 28em; display: flex; align-items: center; gap: 28em;
              box-shadow: 0 16em 40em -28em rgba(17, 24, 39, .2); }
.sl-company i { flex: none; width: 108em; height: 108em; border-radius: 20em; background: #FBE9EA; color: #CF3A4A; display: grid; place-items: center; }
.sl-company i svg { width: 56%; height: 56%; }
.sl-select { margin: 12em 44em 0; height: 80em; border-radius: 16em; background: #EEF0F5; display: flex; align-items: center; justify-content: space-between; padding: 0 28em; }
.sl-select i { width: 34em; height: 34em; color: #CF3A4A; display: inline-flex; }
.sl-list { margin: 16em 44em 0; display: flex; flex-direction: column; gap: 30em; }
.sl-item { position: relative; background: #fff; border-radius: 40em; padding: 0 40em 30em; display: flex; flex-direction: column; overflow: hidden; min-height: 346em;
           box-shadow: 0 16em 40em -28em rgba(17, 24, 39, .2); }
.sl-tab { align-self: flex-start; margin: 0 0 30em -40em; height: 102em; padding: 0 40em; display: grid; place-items: center; background: #CF3A4A; border-radius: 40em 0 40em 0; }
.sl-pat { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; opacity: .35; pointer-events: none;
          background: radial-gradient(circle, transparent 38%, #F8D5C5 40%, #F8D5C5 48%, transparent 50%) 0 0 / 64em 64em; opacity: .5; }
.sl-item .sc-t { position: relative; }

/* ---- layar beranda (fitur lainnya) ---- */
.hm-blob { position: absolute; border-radius: 40em; }
.hm-blob--1 { left: -30em; top: -10em; width: 300em; height: 130em; background: #F8E2E2; }
.hm-blob--2 { left: 330em; top: 24em; width: 380em; height: 92em; background: #FBEDED; }
.hm-top { position: relative; margin: 10em 44em 0; display: flex; align-items: center; gap: 26em; flex: none; }
.hm-avatar { width: 98em; height: 98em; border-radius: 50%; flex: none; box-shadow: 0 0 0 4em #fff;
             background: #EAD9C8 url(../image/scene/avatar.png) center / cover no-repeat; }
.hm-bell { margin-left: auto; width: 40em; height: 40em; color: #343434; position: relative; display: inline-flex; }
.hm-bell::after { content: ""; position: absolute; right: 2em; top: 0; width: 14em; height: 14em; border-radius: 50%; background: #CF3A4A; }
.hm-company { margin: 24em 44em 0; height: 77em; flex: none; background: #fff; border-radius: 24em; display: flex; align-items: center; gap: 18em; padding: 0 24em;
              box-shadow: 0 12em 30em -22em rgba(17, 24, 39, .2); }
.hm-company i { width: 40em; height: 40em; color: #6B6B6B; display: inline-flex; flex: none; }
.hm-card { margin: 16em 44em 0; flex: none; background: #fff; border-radius: 40em; padding: 36em 36em 30em; display: flex; flex-direction: column;
           box-shadow: 0 16em 40em -28em rgba(17, 24, 39, .2); }
.hm-div { height: 2em; background: #E4E4E4; margin: 26em 0 22em; }
.hm-grid { margin: 24em 44em 0; display: grid; grid-template-columns: 237em 1fr; gap: 34em; align-items: start; }
.hm-cuti { position: relative; overflow: hidden; height: 134em; border: 2em solid #CF3A4A; border-radius: 24em; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hm-cuti .sl-pat { width: 100%; opacity: .25; background-size: 90em 90em; }
.hm-num { flex: none; width: 70em; height: 70em; border-radius: 50%; border: 2em solid #9A9A9A; display: grid; place-items: center; }
.hm-fab { position: absolute; left: 600em; top: 640em; width: 90em; height: 90em; border-radius: 24em; background: #CF3A4A; color: #fff; display: grid; place-items: center; z-index: 2; }
.hm-fab svg { width: 44%; height: 44%; }

/* ---- layar penilaian & rincian gaji (hanya versi bare/buram) ---- */
.scr-nilai, .scr-rincian { background: #fff; border-radius: 44em; padding: 60em 55em 40em; }
.ni-card { margin-top: 44em; border: 2em solid #ECECEC; border-radius: 34em; padding: 24em; display: flex; flex-direction: column; }
.ni-card--ghost { height: 120em; margin-top: 22em; }
.ni-av { flex: none; width: 136em; height: 136em; border-radius: 26em; background: #CF3A4A; display: grid; place-items: center; }
.ni-sep { width: 2em; height: 60em; background: #E4E4E4; }
.ri-band { margin-top: 44em; height: 66em; border-radius: 12em; background: #CF3A4A; display: flex; align-items: center; padding: 0 30em; }
.scr-rincian .ri-band + .sc-col { }

/* =====================================================================
   ANIMASI — hanya bila scene.js aktif (html.sc-js), scene terpilih (sc-on)
   dan sudah tampak di layar (sc-live). Semua transform/opacity saja.
   ===================================================================== */
html.sc-js .sc:not(.sc-live) .sc-card, html.sc-js .sc:not(.sc-on) .sc-card { opacity: 0; }
html.sc-js .sc.sc-on.sc-live .sc-card { animation: sc-pop .9s cubic-bezier(.22, 1, .36, 1) calc(var(--d0, .3s) + var(--i, 0) * .17s) both; }
html.sc-js .sc.sc-on.sc-live .ab-progress i { animation: sc-fill 1.4s cubic-bezier(.22, 1, .36, 1) calc(var(--d0, .3s) + .25s) both; }
.sc--hero { --d0: 1.05s; }   /* setelah kontainer hero selesai mo-rise (.25s + 1.1s) */
.sc--hiw  { --d0: .2s; }
.sc--px   { --d0: .35s; }
html.js-motion .ph { animation: sc-float 7s ease-in-out var(--fd, 0s) infinite; --amp: 8em; }
html.js-motion .sc-card .sc-in { animation: sc-float 6.2s ease-in-out -2s infinite; --amp: 12em; }
html.js-motion .sc-card:nth-of-type(even) .sc-in { animation-duration: 5.2s; animation-delay: -4s; --amp: 10em; }
html.js-motion .sc--px .sc-card .sc-in { --amp: 6em; }
html.js-motion .sc-rings i { animation: sc-ripple 9s ease-in-out infinite alternate; }
html.js-motion .sc-rings i:nth-child(2) { animation-delay: -1.5s; }
html.js-motion .sc-rings i:nth-child(3) { animation-delay: -3s; }
html.js-motion .sc-rings i:nth-child(4) { animation-delay: -4.5s; }
html.js-motion .sc-rings i:nth-child(5) { animation-delay: -6s; }
html.js-motion .sc-badge { animation: sc-breathe 3.2s ease-in-out infinite; }
html.js-motion .sc-card:nth-of-type(even) .sc-badge { animation-delay: -1.6s; }
html.js-motion .hm-bell::after { animation: sc-breathe 1.6s ease-in-out infinite; }
.ab-clock small.is-tick { animation: sc-tick .35s ease-out; }

@keyframes sc-float   { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, calc(-1 * var(--amp, 8em)), 0); } }
@keyframes sc-pop     { from { opacity: 0; transform: translate3d(0, 30em, 0) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes sc-ripple  { from { transform: translate(-50%, -50%) scale(1); opacity: .9; } to { transform: translate(-50%, -50%) scale(1.035); opacity: .55; } }
@keyframes sc-fill    { from { width: 0; } to { width: 23%; } }
@keyframes sc-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes sc-tick    { from { transform: scale(1.18); opacity: .6; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    html.sc-js .sc .sc-card, html.js-motion .ph, html.js-motion .sc-card .sc-in, html.js-motion .sc-rings i,
    html.js-motion .sc-badge, html.js-motion .hm-bell::after, html.sc-js .sc .ab-progress i, .ab-clock small.is-tick { animation: none !important; }
    html.sc-js .sc .sc-card { opacity: 1; }
    .sc-stack .sc { transition: none; }
}