/* AZZA migration case studies: readable HTML layouts with original device photos. */
.migration-cases{background:#f3f7f6;position:relative;border-top:1px solid #d4e1df}
.cases-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end;margin-bottom:30px}
.cases-intro h2{font-size:clamp(38px,4.4vw,64px);line-height:1.08;margin:0}
.cases-intro h2 span{color:var(--teal-ink)}.cases-intro .lead{font-size:20px;margin-bottom:15px}
.cases-intro-actions{display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;margin-top:24px}
.cases-intro-actions .button{font-size:16px}.cases-intro-actions .text-link{font-size:15px}
.cases-contact-note{font-size:14px!important;line-height:1.6;margin:14px 0 0;color:var(--text-muted)}
.cases-disclosure{display:flex;align-items:center;gap:10px;font-size:14px;max-width:none;color:var(--text-muted);margin-bottom:40px}
.cases-disclosure .icon{width:18px;height:18px;flex-basis:18px}
#case-explorer,#vmware-terbaru,#pendampingan-azza,.case-panel{scroll-margin-top:calc(var(--nav-height) + 20px)}
.case-selector-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px}
.case-selector-heading h3{font-size:25px;margin:0}.case-selector-heading>span{font-size:14px;color:var(--text-muted)}
.case-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:28px}
.case-tabs button{display:flex;align-items:center;gap:13px;min-height:70px;text-align:left;padding:16px;background:#fff;border:1px solid #c4d6d3;border-radius:10px;font-weight:600;font-size:16px;line-height:1.3;transition:background .2s,border-color .2s}
.case-tabs button>span{color:var(--teal-ink);font:400 13px var(--font-caps)}
.case-tabs button:hover{border-color:var(--teal)}
.case-tabs button[aria-selected=true]{background:var(--dark);border-color:var(--dark);color:#fff;box-shadow:0 5px 0 var(--mint)}
.case-tabs button[aria-selected=true]>span{color:var(--mint)}
.case-panel{padding:32px;background:#fff;border:1px solid #d4e1df;border-radius:20px;box-shadow:0 16px 48px #0b253008;min-width:0}
.case-heading{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;margin-bottom:26px}
.case-label{font:400 12px var(--font-caps);letter-spacing:.09em;color:var(--teal-ink);display:block;margin-bottom:12px}
.case-heading h3{font-size:29px;line-height:1.2;margin:0}.case-heading>p{font-size:17px;line-height:1.7;margin:0}
.case-blueprint{background:#0b2530;border-radius:15px;padding:24px;color:#d6e4e7;overflow:hidden;background-image:linear-gradient(#72dac406 1px,transparent 1px),linear-gradient(90deg,#72dac406 1px,transparent 1px);background-size:32px 32px}
.case-blueprint-top,.case-blueprint-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px;line-height:1.5}
.case-blueprint-top{padding-bottom:22px;color:#a9c2c8;letter-spacing:.05em}
.case-blueprint-top>span,.case-blueprint-foot>span:first-child{display:flex;align-items:center;gap:8px}
.case-blueprint .icon{width:18px;height:18px;flex-basis:18px}
.layout-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:#72dac4;margin:0 8px}
.case-route-grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:38px;align-items:stretch}
.case-machine,.case-bridge{min-width:0;padding:20px;border:1px solid #527580;border-radius:12px;background:#123641}
.case-node-step{font:400 12px var(--font-caps);color:#a9c2c8;letter-spacing:.04em;display:block;margin-bottom:14px}
.case-blueprint h4{color:#fff;font-size:24px;line-height:1.3;margin-bottom:18px}
.case-workloads{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.case-workloads span{padding:3px 8px;border:1px solid #527580;border-radius:4px;background:#0b2530;font-size:12px;line-height:1.5}
.case-machine img{height:90px;width:100%;object-fit:contain;margin:15px auto}
.case-machine>p{font-size:14px;line-height:1.5;margin-bottom:16px;min-height:42px}
.case-issue,.case-result{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;padding-top:14px;border-top:1px solid #527580}
.case-issue{color:#f7c66b}.case-result{color:var(--mint)}
.case-target{border-color:#72dac499;background:#123e43}
.case-target .case-node-step{color:var(--mint)}
.case-bridge{border-color:#72dac488;position:relative;display:flex;flex-direction:column;justify-content:center;background:#0b2530}
.case-bridge:before,.case-bridge:after{content:'';position:absolute;top:50%;height:3px;width:38px;background:repeating-linear-gradient(90deg,#63c7ff 0 6px,#63c7ff33 6px 14px);background-size:28px 3px;animation:case-flow 1.8s linear infinite}
.case-bridge:before{right:100%}.case-bridge:after{left:100%;background-image:repeating-linear-gradient(90deg,#72dac4 0 6px,#72dac433 6px 14px)}
.case-bridge h4{font-size:23px}.case-bridge .case-services{padding:0;list-style:none;margin:0 0 20px}
.case-bridge li{display:flex;gap:10px;font-size:14px;line-height:1.55;align-items:flex-start;margin:0 0 12px}
.case-bridge li>.icon{color:var(--mint);margin-top:2px;flex-shrink:0}
.case-bridge-foot{display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.5;color:var(--mint);margin-top:auto}
.case-blueprint-foot{margin-top:22px;color:#a9c2c8;font-size:12px}.case-blueprint-foot>span{max-width:60%}
@keyframes case-flow{to{background-position:28px 0}}
.case-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:32px 0}
.case-detail-grid>div+div{border-left:1px solid var(--line);padding-left:28px}
.case-detail-grid h4{font-size:20px;margin-bottom:18px}.case-detail-grid ul{font-size:16px;line-height:1.65}
.case-detail-grid li{display:flex;gap:9px;align-items:flex-start;margin-bottom:15px}
.case-detail-grid .icon{color:var(--teal);width:17px;height:17px;flex-basis:17px;margin-top:5px}
.case-boundary{display:flex;align-items:flex-start;gap:12px;max-width:none;padding:18px 20px;font-size:15px;line-height:1.65;background:#f3f7f6;border-radius:10px;border-left:3px solid var(--teal);margin-bottom:26px}
.case-boundary>.icon{margin-top:3px;color:var(--teal-ink);flex-shrink:0}
.case-action{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:20px 24px;margin-bottom:26px;border:1px solid #c4dcd7;border-radius:12px;background:#eff8f5}
.case-action p{font-size:16px;margin:0}.case-action strong{font-size:19px;color:var(--ink)}
.case-action .button{font-size:16px;flex-shrink:0}
.migration-knowledge{margin-top:36px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.migration-insight+.migration-insight{border-top:1px solid var(--line)}
.migration-insight summary{display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;padding:26px 32px}
.migration-insight summary::-webkit-details-marker{display:none}
.migration-insight summary strong{font-size:22px;line-height:1.4;color:var(--ink);display:block}
.migration-insight summary .case-label{margin-bottom:8px}
.migration-insight summary>.icon{transition:transform .2s;color:var(--teal-ink);flex-shrink:0}
.migration-insight[open] summary>.icon{transform:rotate(45deg)}
.insight-body{padding:8px 32px 30px}.insight-body>.lead{font-size:20px}
.insight-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.insight-columns h4{font-size:20px}.insight-columns p{font-size:16px;line-height:1.7}
.insight-body>.note{max-width:none;margin-bottom:0;padding-top:15px;border-top:1px solid var(--line)}
.case-delivery{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;padding:52px 0 0}
.case-delivery h3{font-size:36px;line-height:1.2;margin:0}
.case-delivery p{font-size:18px}.case-delivery .eyebrow{font-size:12px}
.acceptance-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 24px;margin:26px 0}
.acceptance-grid>span{display:flex;align-items:center;gap:10px;font-size:16px}.acceptance-grid .icon{color:var(--teal)}
.case-context-link{padding-top:32px;margin-bottom:0;max-width:none}
@media(max-width:1100px){
 .cases-intro{gap:32px}.case-panel{padding:26px}.case-tabs{gap:6px}.case-tabs button{font-size:14px;padding:14px 10px;gap:8px}
 .case-route-grid{gap:24px}.case-bridge:before,.case-bridge:after{width:24px}.case-blueprint{padding:20px}
 .case-machine,.case-bridge{padding:15px}.case-blueprint h4{font-size:21px}.case-node-step{font-size:12px;letter-spacing:0}
 .case-detail-grid{gap:20px}.case-detail-grid>div+div{padding-left:20px}.case-action{align-items:flex-start}.case-action .button{max-width:40%}
}
@media(max-width:767px){
 .cases-intro{grid-template-columns:1fr;gap:26px}.cases-intro h2{font-size:38px}.cases-intro .lead{font-size:19px}
 .cases-disclosure{align-items:flex-start;font-size:14px;margin-bottom:30px}.cases-disclosure .icon{margin-top:3px}
 .case-selector-heading{display:block}.case-selector-heading h3{font-size:24px;margin-bottom:6px}.case-selector-heading>span{font-size:13px}
 .case-tabs{grid-template-columns:1fr 1fr;gap:8px}.case-tabs button{min-height:57px;font-size:15px;padding:12px}.case-tabs button:last-child{grid-column:1/-1}
 .case-panel{padding:20px;border-radius:14px}.case-heading{grid-template-columns:1fr;gap:18px}.case-heading h3{font-size:27px}.case-heading>p{font-size:17px}
 .case-blueprint{padding:18px 14px;margin-inline:-7px}.case-blueprint-top{padding-bottom:18px;font-size:12px}.case-blueprint-top>span:last-child{display:none}
 .case-route-grid{grid-template-columns:1fr;gap:26px}.case-machine,.case-bridge{padding:20px}
 .case-machine img{height:76px;margin:10px auto}.case-machine>p{min-height:0}.case-workloads{margin-bottom:5px}
 .case-bridge:before,.case-bridge:after{width:3px;height:26px;left:50%;right:auto;top:auto;background:repeating-linear-gradient(0deg,#63c7ff 0 6px,#63c7ff33 6px 14px);background-size:3px 28px;animation-name:case-flow-down}
 .case-bridge:before{bottom:100%}.case-bridge:after{top:100%;background-image:repeating-linear-gradient(0deg,#72dac4 0 6px,#72dac433 6px 14px)}
 .case-bridge h4{font-size:22px}.case-bridge li{font-size:15px}.case-bridge li:last-child{margin-bottom:0}
 .case-blueprint-foot{display:block;font-size:12px}.case-blueprint-foot>span{max-width:none}.case-blueprint-foot>span+span{display:block;margin-top:8px}
 .case-detail-grid{grid-template-columns:1fr;gap:23px;margin:28px 0}.case-detail-grid>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
 .case-detail-grid h4{font-size:21px}.case-detail-grid li{margin-bottom:10px}.case-boundary{padding:16px;font-size:15px}.case-boundary .icon{width:19px;height:19px;flex-basis:19px}
 .case-action{display:block;padding:18px}.case-action p{margin-bottom:20px}.case-action .button{max-width:none;width:100%;font-size:16px}
 .cases-intro-actions{align-items:stretch;flex-direction:column}.cases-intro-actions .button{width:100%}.case-delivery .button{width:100%}
 .migration-insight summary{padding:23px 20px;gap:14px}.migration-insight summary strong{font-size:20px}.migration-insight .case-label{font-size:12px;letter-spacing:.04em}
 .insight-body{padding:0 20px 25px}.insight-columns{grid-template-columns:1fr;gap:10px}.insight-body>.lead{font-size:18px}
 .case-delivery{grid-template-columns:1fr;gap:24px;padding-top:38px}.case-delivery h3{font-size:32px}.acceptance-grid{grid-template-columns:1fr;gap:14px}
}
@keyframes case-flow-down{to{background-position:0 28px}}
@media(prefers-reduced-motion:reduce){.case-bridge:before,.case-bridge:after{animation:none}}