/* Combined cinematic woodcut and living network. Scoped to the public hero. */
.hybrid-hero .kicker{font-size:11px;line-height:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hybrid-hero .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin:0}
.hybrid-hero .cta{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:58px;padding:16px 24px;background:#c8e97b;color:#073f30;text-decoration:none;font-size:16px;font-weight:700;border-radius:2px;transition:transform .25s,box-shadow .25s}
.hybrid-hero .cta:hover{transform:translateY(-3px);box-shadow:6px 6px 0 #ed1386}.hybrid-hero .cta .arrow{font-size:26px;font-weight:400}.hybrid-hero .secondary{font-size:14px;min-height:48px;display:inline-flex;align-items:center;text-underline-offset:5px}
.hybrid-hero .orbit-board{position:relative;aspect-ratio:1;width:100%;justify-self:center}.hybrid-hero .orbit-grid{position:absolute;inset:6%;border:1px solid #c8e97b44;border-radius:50%}.hybrid-hero .orbit-grid:before,.hybrid-hero .orbit-grid:after{content:'';position:absolute;border:1px dashed #c8e97b30;border-radius:50%;inset:12%}.hybrid-hero .orbit-grid:after{inset:29%}
.hybrid-hero .orbit-cross{position:absolute;inset:0;width:100%;height:100%;color:#c8e97b;opacity:.6}.hybrid-hero .orbit-cross path{stroke-dasharray:6 10;animation:khidmah-flow 24s linear infinite}.hybrid-hero .orbit-center{position:absolute;inset:35%;background:#c8e97b;color:#073f30;border-radius:50%;z-index:2}
.hybrid-hero .orbit-node{position:absolute;width:31%;aspect-ratio:1;z-index:3;animation:khidmah-float 8s ease-in-out infinite}.hybrid-hero .orbit-node figcaption{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#f6f3e8;color:#073f30;font-weight:650;border-radius:40px;line-height:1.5}
.hybrid-hero .node-one{top:0;left:33%;animation-delay:-2s}.hybrid-hero .node-two{right:0;top:39%;animation-delay:-4s}.hybrid-hero .node-three{bottom:0;left:22%;animation-delay:-6s}.hybrid-hero .node-four{left:0;top:28%;width:25%;animation-delay:-1s}.hybrid-hero .node-four figcaption{background:#ed1386;color:#f6f3e8}
.hybrid-hero .orbit-point{position:absolute;inset:4%;border-radius:50%;animation:khidmah-spin 32s linear infinite}.hybrid-hero .orbit-point:before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#ed1386;top:50%;left:-6px;box-shadow:0 0 0 8px #ed138619}
.hybrid-hero .asterisk{font-family:Source,sans-serif;font-weight:400;display:block;animation:khidmah-spin 20s linear infinite;transform-origin:center;color:#073f30}
.hybrid-home .ribbon{height:46px;background:#c8e97b;color:#073f30;overflow:hidden;display:flex;align-items:center;border-top:1px solid #073f30}.hybrid-home .ribbon-track{display:flex;align-items:center;gap:40px;white-space:nowrap;width:max-content;animation:khidmah-crawl 32s linear infinite;font-size:13px;font-weight:750;letter-spacing:.14em}.hybrid-home .ribbon-track span{display:flex;align-items:center;gap:40px}.hybrid-home .ribbon-track b{color:#d81478;font-size:24px}
@keyframes khidmah-spin{to{transform:rotate(360deg)}}@keyframes khidmah-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes khidmah-flow{to{stroke-dashoffset:-320}}@keyframes khidmah-crawl{to{transform:translateX(-50%)}}@keyframes khidmah-pan{0%,100%{transform:scale(1.07) translateX(0)}50%{transform:scale(1.13) translateX(-1.8%)}}@keyframes khidmah-reveal{from{clip-path:inset(100% 0 0);transform:translateY(24px)}to{clip-path:inset(0);transform:none}}
/* 04 — cinematic woodcut meets the living circle of everyday service. */
.hybrid-hero{background:#06382c;color:#f6f3e8}.hybrid-home .masthead{border-color:#f6f3e824}.hybrid-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:46% 54%;align-items:center;min-height:max(740px,calc(100svh - 132px));height:auto;padding:40px 5vw 38px;background:#06382c}.hybrid-landscape{position:absolute;inset:0;z-index:-3;animation:khidmah-pan 28s ease-in-out infinite;opacity:.54}.hybrid-hero:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#06382cf7 0%,#06382ce8 32%,#06382cb0 59%,#06382c65 100%),linear-gradient(0deg,#06382c33,transparent 28%,#06382c60)}.hybrid-copy{z-index:4;position:relative}.hybrid-copy .kicker{color:#c8e97b;display:flex;align-items:center;gap:12px;margin-bottom:30px}.hybrid-copy .kicker>span{width:28px;height:2px;background:#ed1386;flex:none}.hybrid-home h1{font:850 clamp(76px,7.6vw,138px)/.96 Bitter,serif;letter-spacing:-.06em;margin-left:-.04em}.hybrid-home h1>span{display:block;animation:khidmah-reveal 1s both}.hybrid-home h1>span:nth-child(2){animation-delay:.12s}.hybrid-home h1 em{font-style:normal;color:#c8e97b;position:relative}.hybrid-home h1 em:after{content:'';position:absolute;bottom:0;left:2%;right:-4%;height:8px;transform:rotate(-4deg);background:#ed1386;z-index:-1}.hybrid-copy>p:not(.kicker){font-size:23px;line-height:1.5;margin:30px 0 32px;color:#e5eddc}.hybrid-copy strong{font-weight:650}.hybrid-network{width:100%;position:relative;padding:10px 0 28px;z-index:4}.hybrid-home .orbit-board{width:100%;max-width:640px;transform:none;margin:auto}.hybrid-home .orbit-grid{border-color:#c8e97b66}.hybrid-home .orbit-cross{opacity:.85}.hybrid-home .orbit-node{background:#06382c;border:1px solid #d6e7ad;border-radius:50%;padding:5px;box-shadow:0 12px 30px #00241e55}.node-portrait{width:100%;height:100%;border-radius:50%;background-image:url('/aset-anggota/hero-pedoman-identitas-960.webp');background-image:image-set(url('/aset-anggota/hero-pedoman-identitas-lcp-960.avif') type('image/avif'),url('/aset-anggota/hero-pedoman-identitas-960.webp') type('image/webp'));background-size:300% 200%;background-repeat:no-repeat}.portrait-learn{background-position:0 0}.portrait-care{background-position:100% 0}.portrait-help{background-position:100% 100%}.portrait-work{background-position:0 100%}.hybrid-home .orbit-node figcaption{font-size:12px;padding:8px 14px;border:1px solid #06382c22;box-shadow:0 4px 12px #00241e33}.hybrid-home .orbit-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 0 12px #c8e97b10,0 15px 40px #00241e70}.hybrid-home .orbit-center .asterisk{font-size:100px;line-height:.9}.center-label{text-align:center;font-size:9px;line-height:1.35;letter-spacing:.1em;font-weight:750}.hybrid-pulse{position:absolute;inset:33%;border:1px solid #c8e97b66;border-radius:50%;animation:connectPulse 7s ease-out infinite}.hybrid-home .ribbon{position:relative;z-index:4}@keyframes connectPulse{0%,15%{transform:scale(1);opacity:.5}85%,100%{transform:scale(2.65);opacity:0}}
@media(min-width:801px) and (max-width:1100px){.hybrid-home h1{font-size:7.7vw}.hybrid-copy .kicker{font-size:9px;letter-spacing:.08em}.hybrid-copy>p:not(.kicker){font-size:20px}.hybrid-home .orbit-center .asterisk{font-size:75px}.center-label{font-size:7px}.hybrid-home .orbit-node figcaption{font-size:10px;padding:6px 10px}.hybrid-home .hero-actions{gap:10px}}
@media(max-width:800px){.hybrid-hero{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;padding:34px 22px 24px;gap:24px}.hybrid-hero:before{background:linear-gradient(180deg,#06382cfa 0%,#06382cf5 36%,#06382c90 61%,#06382c75 100%)}.hybrid-landscape{background-position:63% bottom;background-size:auto 680px;background-repeat:no-repeat;opacity:.65}.hybrid-copy .kicker{font-size:8px;letter-spacing:.12em;margin-bottom:24px}.hybrid-home h1{font-size:clamp(62px,18.5vw,110px);line-height:.96}.hybrid-home h1 em:after{height:6px}.hybrid-copy>p:not(.kicker){font-size:18px;line-height:1.4;margin:24px 0}.hybrid-home .hero-actions{gap:4px 18px}.hybrid-home .cta{gap:24px}.hybrid-network{padding:8px 0 0;max-width:450px;align-self:center}.hybrid-home .orbit-board{margin:0}.hybrid-home .orbit-center .asterisk{font-size:58px}.center-label{font-size:5.5px;letter-spacing:.06em}.hybrid-home .orbit-center{gap:4px;box-shadow:0 0 0 7px #c8e97b10,0 12px 25px #00241e70}.hybrid-home .orbit-node{padding:3px}.hybrid-home .orbit-node figcaption{font-size:9px;padding:5px 8px;bottom:-8px}.hybrid-home .ribbon{height:40px}}

.hybrid-hero h1{margin-top:0;margin-bottom:0}.hybrid-landscape{display:block;pointer-events:none}.hybrid-landscape img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.hybrid-copy,.hybrid-network{min-width:0}.hybrid-home .cover-index{margin-block:24px 0}
@media(max-width:800px){.hybrid-landscape img{object-position:63% bottom}.hybrid-landscape{top:auto;height:680px}.hybrid-hero .cta{min-height:54px;font-size:14px;padding:14px 18px}.hybrid-hero .secondary{font-size:12px}.hybrid-home .ribbon-track{font-size:10px;gap:24px}.hybrid-home .ribbon-track span{gap:24px}.hybrid-hero .orbit-point:before{width:8px;height:8px;left:-4px}}
.hybrid-home.motion-idle .hybrid-hero *,.hybrid-home.motion-idle .ribbon *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.hybrid-hero *,.hybrid-hero *:before,.hybrid-hero *:after,.hybrid-home .ribbon *{animation:none!important;transition:none!important}.hybrid-hero .parallax{translate:none!important}}
@media print{.hybrid-hero *,.hybrid-home .ribbon *{animation:none!important}.hybrid-hero{height:auto;min-height:0}.hybrid-network{max-width:400px}}

/* Login is part of the hero; the same server form handles all validation. */
.hybrid-hero .hero-login{max-width:430px;margin:24px 0 4px;padding:24px;background:#f6f3e8;color:#073f30;border:1px solid #c8e97b55;border-radius:16px;box-shadow:0 18px 50px #001f2250;scroll-margin-top:110px;scroll-margin-bottom:110px}
.hybrid-hero .hero-login h2{font:750 24px/1.2 Bitter,serif;letter-spacing:-.04em;margin:0 0 20px}
.hero-login .auth-intro{display:none}.hero-login form{display:grid;gap:12px;margin:0}.hero-login .registration-field{display:grid;gap:6px}.hero-login label{font-size:14px;font-weight:650;line-height:1.3}.hero-login input:not([type=hidden]){width:100%;min-width:0;min-height:48px;border:1px solid #81978d;border-radius:8px;background:#fffdf5;color:#073f30;padding:11px 12px;font:400 16px/1.4 Source,sans-serif;box-sizing:border-box}
.hero-login input:focus-visible,.hero-login button:focus-visible,.hero-login a:focus-visible{outline:3px solid #c31671;outline-offset:3px}.hero-login .button{width:100%;min-height:50px;background:#073f30;color:#fffdf5;border:0;border-radius:8px;font:700 17px/1.4 Source,sans-serif;cursor:pointer;padding:12px 18px}.hero-login .button:hover{background:#12563f}.hero-login .password-visibility{justify-self:end;min-height:32px;background:transparent;border:0;padding:4px 0;color:#073f30;font:600 13px/1.4 Source,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.hero-login .password-visibility[hidden]{display:none}
.hero-login .password-form>p:not(.auth-intro){margin:12px 0 0;font-size:13px;line-height:1.8}.hero-login a{color:#073f30;text-underline-offset:3px;display:inline-block;padding-block:4px}.hero-login .form-alert{background:#ffe9f2;border-left:3px solid #b51467;color:#76214b;padding:12px;margin:0 0 16px;font-size:14px;line-height:1.45;scroll-margin:120px 0}.hero-login input[aria-invalid=true]{border-color:#b51467}.hero-login [role=status]{font-size:14px;line-height:1.5;margin:0 0 12px}.hybrid-copy>.secondary{gap:12px;color:#f6f3e8}.hybrid-copy>p:not(.kicker){margin:22px 0}.hybrid-copy .kicker{margin-bottom:24px}
@media(max-width:800px){.hybrid-hero{padding-top:26px}.hybrid-home h1{font-size:clamp(54px,16vw,90px)}.hybrid-hero .hero-login{max-width:none;padding:20px;margin-top:20px;scroll-margin-top:94px}.hybrid-hero .hero-login h2{font-size:22px;margin-bottom:16px}.hybrid-copy .kicker{margin-bottom:20px}.hybrid-copy>p:not(.kicker){margin:18px 0;font-size:17px}.hybrid-network{padding-bottom:12px}.hybrid-hero .hero-login input{font-size:16px}}

/* One continuous hero: headline and illustration left, quiet login right. */
.hybrid-hero{grid-template-areas:"copy login";grid-template-columns:minmax(0,1fr) minmax(300px,360px);grid-template-rows:1fr;column-gap:clamp(48px,7vw,120px);row-gap:0;align-content:center;padding:48px 6vw;min-height:max(740px,calc(100svh - 132px))}
.hybrid-copy{grid-area:copy}.hybrid-network{grid-area:network;justify-self:end;align-self:end;max-width:350px;padding:8px 0 16px;margin-top:-70px;margin-right:24px}.hybrid-hero:before{background:linear-gradient(90deg,#06382ce8 0%,#06382cd9 38%,#06382cf2 72%,#06382cf7 100%),linear-gradient(0deg,#06382c40,transparent 60%)}
.hybrid-hero .hero-login{grid-area:login;align-self:center;width:100%;max-width:360px;box-sizing:border-box;margin:0;padding:8px 0 8px 36px;background:transparent;color:#f6f3e8;border:0;border-left:1px solid #f6f3e833;border-radius:0;box-shadow:none;z-index:4}
.hybrid-hero .hero-login h2{font-size:25px;margin-bottom:24px;color:#f6f3e8}.hero-login label{color:#e5eddc}.hero-login input:not([type=hidden]){background:#f6f3e80c;border-color:#becdb578;color:#fffdf5;border-radius:6px}.hero-login input:not([type=hidden]):focus{background:#f6f3e818;border-color:#c8e97b}.hero-login .button{background:#c8e97b;color:#073f30;border-radius:6px}.hero-login .button:hover{background:#d8f29f}.hero-login a,.hero-login .password-visibility{color:#e5eddc}.hero-login a:hover,.hero-login .password-visibility:hover{color:#c8e97b}.hero-login .password-form>p:not(.auth-intro){font-size:13px}.hero-login .form-alert a{color:#76214b}.hero-login input:focus-visible,.hero-login button:focus-visible,.hero-login a:focus-visible{outline-color:#c8e97b}.hero-login .local-entry{font-size:13px;margin-bottom:16px}
@media(min-width:901px) and (max-width:1200px){.hybrid-hero{column-gap:40px;padding-inline:5vw;grid-template-columns:minmax(0,1fr) 300px}.hybrid-home h1{font-size:clamp(72px,8vw,96px)}.hybrid-network{max-width:280px;margin-top:-8px;margin-right:0}.hybrid-copy>p:not(.kicker){font-size:20px}.hybrid-hero .hero-login{padding-left:28px}.hybrid-home .orbit-center .asterisk{font-size:62px}.hybrid-home .orbit-node figcaption{font-size:10px;padding:6px 10px}.center-label{font-size:6px}}
@media(min-width:1201px){.hybrid-home h1{font-size:clamp(96px,8vw,138px)}.hybrid-home .orbit-center .asterisk{font-size:75px}.hybrid-home .orbit-node figcaption{font-size:11px;padding:7px 12px}.center-label{font-size:7px}}
@media(max-width:900px){.hybrid-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:30px 24px 26px;gap:26px}.hybrid-copy{order:0}.hybrid-hero .hero-login{order:1;max-width:520px;align-self:center;padding:26px 0 0;border-left:0;border-top:1px solid #f6f3e833;scroll-margin-top:100px}.hybrid-network{order:2;max-width:360px;margin:10px 0 0;padding:8px 0 14px;align-self:center}.hybrid-hero:before{background:linear-gradient(180deg,#06382cf5 0%,#06382cf5 48%,#06382cb0 72%,#06382c80 100%)}.hybrid-home h1{font-size:clamp(58px,16vw,100px)}.hybrid-copy>p:not(.kicker){font-size:18px;margin:20px 0 8px}.hybrid-hero .hero-login h2{font-size:24px;margin-bottom:20px}.hybrid-home .orbit-center .asterisk{font-size:64px}.hybrid-home .orbit-node figcaption{font-size:10px;padding:6px 10px}.center-label{font-size:6px}.hybrid-copy .kicker{margin-bottom:20px}.hybrid-hero .secondary{font-size:13px}}
@media(max-width:360px){.hybrid-hero{padding-inline:20px}.hybrid-home h1{font-size:54px}.hybrid-home .orbit-node figcaption{font-size:9px;padding:5px 8px}.hero-login .password-form>p:not(.auth-intro){font-size:12px}}

/* Keep the two columns together instead of stretching across wide screens. */
@media(min-width:901px){.hybrid-hero{min-height:640px}}
@media(min-width:1201px){.hybrid-hero{grid-template-columns:minmax(0,580px) 360px;column-gap:48px;justify-content:center}.hybrid-home h1{font-size:clamp(108px,9vw,138px)}}