/* Komitmen — Visi · Misi · Kebijakan Mutu & K3 (tear slides, scroll-driven) */
.km, .km *, .km *::before, .km *::after { box-sizing: border-box; }
.km { --hh: 88px; position: relative; background: #0f1030; color: #fff; }

/* tanpa JS: slider tetap bisa digeser (scroll-snap) */
.km-stage { position: relative; height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); overflow: hidden; }
.km-view { flex: 1; min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.km-track { display: flex; height: 100%; }
.km-s { scroll-snap-align: start; }

/* dengan JS: pin + geser dikendalikan scroll */
.km.js .km-stage { position: sticky; top: var(--hh); }
.km.js .km-view { overflow: hidden; scroll-snap-type: none; }
.km.js .km-track { will-change: transform; }

.km-bgs { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.km-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(13,14,43,.94), rgba(13,14,43,.6) 52%, transparent 85%); }
.km-in { position: absolute; inset: 0; display: flex; flex-direction: column; }

.km-tabs { display: flex; gap: 8px; padding: clamp(18px, 4vh, 36px) clamp(20px, 6vw, 96px) 0; overflow-x: auto; scrollbar-width: none; }
.km-tabs button { flex: none; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.05); color: rgba(255,255,255,.8);
  font: 500 12px/1 Inter, Helvetica, Arial, sans-serif; letter-spacing: .08em; padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.km-tabs button:hover { color: #fff; border-color: rgba(255,255,255,.55); }
.km-tabs button[aria-pressed="true"] { background: linear-gradient(120deg, #c92a31, #e8323a); border-color: transparent; color: #fff; }

.km-s { flex: 0 0 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(20px, 6vw, 96px); }
.km-s > * { max-width: min(52%, 22em); }
.km-k { display: block; margin-bottom: 14px; font: 600 12px/1 Inter, Helvetica, Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ff6b5e; }
.km-s p, .km-s h2 { margin: 0; color: #fff; font: italic 500 clamp(24px, 3vw, 42px)/1.22 var(--serif, 'Cormorant Garamond', Georgia, serif); }
.km-s .km-big { font-size: clamp(38px, 5.4vw, 80px); line-height: 1.04; }
.km.js .km-s > * { opacity: .15; transform: translateX(30px); transition: opacity .5s, transform .65s cubic-bezier(.2,.7,.2,1); }
.km.js .km-s.on > * { opacity: 1; transform: none; }
.km.js .km-s.on > :nth-child(2) { transition-delay: .08s; }

.km-ctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(20px, 6vw, 96px) clamp(16px, 3vh, 32px); }
.km-info { display: flex; align-items: center; gap: 18px; min-width: 0; }
.km-count { font: 600 12px ui-monospace, Menlo, monospace; letter-spacing: .14em; color: rgba(255,255,255,.7); white-space: nowrap; }
.km-dots { display: flex; align-items: center; gap: 7px; }
.km-d { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; transition: background .3s, box-shadow .3s, transform .3s; }
.km-d.gs { margin-left: 9px; }
.km-d:hover { background: rgba(255,255,255,.6); }
.km-d[aria-current="true"] { background: #ff6b5e; box-shadow: 0 0 12px #ff6b5e; transform: scale(1.3); }
.km-nav { display: flex; gap: 8px; }
.km-nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .25s, border-color .25s, opacity .25s; }
.km-nav button:hover:not(:disabled) { background: #e8323a; border-color: #e8323a; }
.km-nav button:disabled { opacity: .3; cursor: default; }
.km button:focus-visible { outline: 2px solid #ff6b5e; outline-offset: 3px; }

/* kertas robek menutup seluruh stage */
.km-paper { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.km-paper svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.km.done .km-paper { display: none; }

@media (max-width: 800px) {
  .km-s > * { max-width: 100%; }
  .km-shade { background: linear-gradient(180deg, rgba(13,14,43,.15), rgba(13,14,43,.55) 32%, rgba(13,14,43,.92) 58%); }
  .km-count { display: none; }
  .km-dots { gap: 5px; }
  .km-d { width: 8px; height: 8px; }
  .km-nav button { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .km.js .km-s > * { transition: none; transform: none; } }

/* ---- latar ilustrasi per proyek ---- */
.km-bgs .l { fill: none; stroke: rgba(255,255,255,.62); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.km-bgs .r { stroke: #e8323a; }
.km-bgs .b { stroke: #7b7ee8; }
.km-bgs .f { fill: rgba(255,255,255,.05); }
.km-bgs .fr { fill: #e8323a; stroke: none; }
.km-bgs .nb { fill: none; stroke: none; }
.km-bgs .pw { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 48; stroke-linejoin: round; }
.km-bgs .pn { fill: none; stroke: #0f1030; stroke-width: 44; stroke-linejoin: round; }
.km-bgs .dsh { stroke-dasharray: 4 10; opacity: .6; }
.km-bgs .tx { fill: rgba(255,255,255,.45); font: 600 14px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; }

.km-bgs .flow { stroke-dasharray: 10 14; animation: km-flow 1.2s linear infinite; }
.km-bgs .spin, .km-bgs .swing, .km-bgs .rise, .km-bgs .bellow { transform-box: fill-box; transform-origin: center; }
.km-bgs .spin { animation: km-spin 8s linear infinite; }
.km-bgs .spin.slow { animation-duration: 16s; }
.km-bgs .swing { animation: km-swing 3.2s ease-in-out infinite; }
.km-bgs .pulse { animation: km-pulse 1.8s ease-in-out infinite; }
.km-bgs .belt { animation: km-belt 7.2s linear infinite; }
.km-bgs .bellow { transform-origin: 0 50%; animation: km-bellow 2.6s ease-in-out infinite; }
.km-bgs .bellow * { vector-effect: non-scaling-stroke; }
.km-bgs .rise { animation: km-rise 4s ease-in infinite; }
.km-bgs .drop { animation: km-drop 1.4s linear infinite; }
.km-bgs .drop2 { animation: km-rain 1.6s linear infinite; }

@keyframes km-flow { to { stroke-dashoffset: -48; } }
@keyframes km-spin { to { transform: rotate(360deg); } }
@keyframes km-swing { 0%, 100% { transform: rotate(-55deg); } 50% { transform: rotate(55deg); } }
@keyframes km-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes km-belt { to { transform: translateX(1400px); } }
@keyframes km-bellow { 0%, 100% { transform: scaleX(.62); } 50% { transform: scaleX(1); } }
@keyframes km-rise { 0% { transform: translateY(0) scale(1); opacity: .7; } 100% { transform: translateY(-170px) scale(1.8); opacity: 0; } }
@keyframes km-drop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
@keyframes km-rain { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(170px); opacity: 0; } }
.km-bgs .tx.sm { font-size: 11px; letter-spacing: .1em; }
.km-bgs .tx.big { font-size: 26px; letter-spacing: .12em; fill: rgba(255,255,255,.55); }
.km-bgs .glow, .km-bgs .ripple, .km-bgs .twinkle, .km-bgs .bob, .km-bgs .tilt, .km-bgs .grow { transform-box: fill-box; transform-origin: center; }
.km-bgs .glow { animation: km-glow 2.4s ease-in-out infinite; }
.km-bgs .ripple { animation: km-ripple 3s ease-out infinite; }
.km-bgs .twinkle { animation: km-twinkle 1.8s ease-in-out infinite; }
.km-bgs .bob { animation: km-bob 2.2s ease-in-out infinite; }
.km-bgs .tilt { animation: km-tilt 4.5s ease-in-out infinite; }
.km-bgs .grow { transform-origin: 50% 100%; animation: km-grow 3.4s ease-out infinite; }
.km-bgs .blink { animation: km-blink 1.2s steps(2, jump-none) infinite; }
@keyframes km-glow { 0%, 100% { transform: scale(.94); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes km-ripple { 0% { transform: scale(.35); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes km-twinkle { 0%, 100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes km-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes km-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes km-grow { 0% { transform: scaleY(.1); } 55%, 100% { transform: scaleY(1); } }
@keyframes km-blink { 0% { opacity: 1; } 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .km-bgs * { animation: none !important; } }
/* HP: ilustrasi duduk di antara tab dan teks, tidak tertutup tab */
@media (max-width: 800px) {
  .km-bgs { bottom: auto; top: 70px; height: 34%; }
}

/* sambung ke Proyek: stage digeser lewat transform -> promosikan ke layer sendiri biar mulus */
.km.chain .km-stage { will-change: transform; backface-visibility: hidden; }