/* Structured engineering workflow with blueprint grid and ordered phases. */
#proses{background-color:#f1f5f8;background-image:linear-gradient(#183c5a04 1px,transparent 1px),linear-gradient(90deg,#183c5a04 1px,transparent 1px);background-size:32px 32px}
#proses .section-head{align-items:center;margin-bottom:38px}
#proses h2{font-size:43px;letter-spacing:-1.5px;line-height:1.23}
.workflow-intro{max-width:350px;border-left:2px solid var(--gold);padding-left:23px}
.workflow-intro>span{font-size:9px;letter-spacing:1.6px;font-weight:700;color:var(--blue)}
.workflow-intro p{font-size:12px;line-height:1.9;margin:10px 0 0;color:#617687}
.workflow-banner{display:flex;align-items:center;gap:19px;background:linear-gradient(110deg,#0e293f,#1d405a);padding:25px 28px;border-radius:10px 10px 0 0;color:#fff;position:relative;overflow:hidden}
.workflow-banner:after{content:'';position:absolute;top:0;bottom:0;right:0;width:5px;background:var(--gold)}
.workflow-banner-symbol{width:44px;height:44px;color:var(--gold);flex-shrink:0}
.workflow-banner-symbol svg{width:100%;height:100%}
.workflow-banner>div:nth-child(2)>span{display:block;font-size:8px;letter-spacing:1.8px;color:#bacbd8;margin-bottom:6px}
.workflow-banner strong{font-family:Manrope,sans-serif;font-size:18px;letter-spacing:-.4px;line-height:1.4;display:block}
.workflow-banner-note{display:flex;align-items:center;gap:9px;margin-left:auto;font-size:10px;color:#d5e0e8}
.workflow-banner-note i{width:6px;height:6px;flex-shrink:0;background:var(--gold);border-radius:50%}
#proses .workflow-grid{display:block;padding:0 28px 28px;background:#e7edf2;border:1px solid #d7e1e9;border-top:0;border-radius:0 0 10px 10px}
.workflow-phase-heading{display:flex;align-items:center;gap:14px;padding:26px 0 20px}
.workflow-phase-id{font-size:8px;font-weight:700;letter-spacing:1px;padding:5px 8px;background:#dae4ec;border:1px solid #ccdae5;border-radius:3px;white-space:nowrap;color:#436279}
.workflow-phase-heading h3{font-size:15px;letter-spacing:-.3px;margin:0;color:var(--navy)}
.workflow-phase-label{font-size:8px;letter-spacing:1.4px;color:#718594;margin-left:auto}
.workflow-phase-range{font-size:10px;letter-spacing:1px;color:#637f93;border-left:1px solid #c8d6e1;padding-left:15px}
.workflow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
#proses .step{position:relative;border:1px solid #d6e1e9;border-radius:6px;padding:22px 20px 0;background:#fff;display:flex;flex-direction:column;min-width:0;box-shadow:0 3px 8px #173a5503;transition:transform .25s,box-shadow .25s,border-color .25s}
#proses .step:after{content:'';position:absolute;top:-1px;left:20px;right:20px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
#proses .step:hover{transform:translateY(-4px);border-color:#bccdd9;box-shadow:0 12px 24px #173a5510}
#proses .step:hover:after{transform:scaleX(1)}
.step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.step-number{font-family:Manrope,sans-serif;font-size:38px;font-weight:800;letter-spacing:-2px;color:#b3c4d1;line-height:1}
.step-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid #dfe7ed;border-radius:6px;color:#315875;background:#f4f7f9}
.step-icon svg{width:22px;height:22px}
#proses .step h4{font-size:16px;letter-spacing:-.35px;line-height:1.4;margin:0 0 11px;min-height:45px;color:var(--navy)}
#proses .step p{font-size:11px;line-height:1.85;color:#657b8c;margin:0 0 21px;flex:1}
.step-output{padding:14px 0 18px;border-top:1px solid #e8edf1}
.step-output>span{display:block;font-size:7px;font-weight:700;letter-spacing:1.3px;color:#8597a4;margin-bottom:5px}
.step-output strong{display:block;font-size:9px;font-weight:600;color:#365770;line-height:1.7}
.workflow-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:24px}
.workflow-footer p{display:flex;align-items:center;gap:10px;font-size:10px;color:#6b7e8d;margin:0}
.workflow-footer p>span{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;background:#e2ece7;color:#437661;border-radius:50%}
.workflow-footer .text-link{font-size:11px;white-space:nowrap}
@media(min-width:951px){.step:not(:last-child):before{content:'\2192';position:absolute;z-index:2;top:32px;right:-19px;width:19px;text-align:center;font-size:14px;color:#8198aa}}
@media(max-width:1100px){#proses .step{padding:20px 15px 0}.workflow-steps{gap:14px}#proses .step h4{font-size:14px}.workflow-banner-note{font-size:9px}.workflow-intro{max-width:300px}#proses h2{font-size:37px}}
@media(max-width:950px){.workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.workflow-banner-note{display:none}.workflow-intro{max-width:260px}#proses .step{padding:24px 22px 0}#proses .step h4{font-size:17px;min-height:0}.workflow-footer{align-items:flex-start;flex-direction:column;gap:15px}}
@media(max-width:640px){#proses .section-head{align-items:flex-start;gap:23px;margin-bottom:28px}#proses h2{font-size:32px;letter-spacing:-1px}.workflow-intro{max-width:none;padding-left:17px}.workflow-banner{padding:22px 18px;gap:13px}.workflow-banner-symbol{width:34px;height:34px}.workflow-banner strong{font-size:15px}.workflow-banner>div:nth-child(2)>span{font-size:7px;letter-spacing:1.1px}#proses .workflow-grid{padding:0 15px 18px}.workflow-phase-heading{flex-wrap:wrap;gap:10px;padding:24px 0 17px}.workflow-phase-heading h3{font-size:13px;flex:1;line-height:1.5}.workflow-phase-label,.workflow-phase-range{display:none}.workflow-phase-id{font-size:7px;padding:4px 6px}.workflow-steps{grid-template-columns:minmax(0,1fr);gap:16px}#proses .step{padding:21px 20px 0}.step-top{margin-bottom:16px}.step-number{font-size:34px}#proses .step h4{font-size:18px;margin-bottom:10px}#proses .step p{font-size:12px;margin-bottom:18px}.step-output strong{font-size:10px}.step-output>span{font-size:8px}.workflow-footer p{font-size:10px;align-items:flex-start}.workflow-footer .text-link{padding:5px 0}}
@media(prefers-reduced-motion:reduce){#proses .step,#proses .step:after{transition:none}#proses .step:hover{transform:none}}