/* Header MITRA ADVOKAT dengan gambar + blok ajakan untuk advokat */
.phero .wrap.ao-hwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,56px);align-items:center}
.ao-hfig{margin:0;justify-self:end;width:100%;max-width:440px;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px -28px rgba(14,30,58,.35)}
.ao-hfig img{display:block;width:100%;height:auto}
.ao-join-box{background:linear-gradient(135deg,#1A43B8,#2F63E0);color:#fff;border-radius:22px;padding:clamp(22px,4vw,44px);box-shadow:0 24px 60px -30px rgba(14,30,58,.45)}
.ao-join-box .eyebrow{color:#fff!important}
.ao-join-box h2{color:#fff;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.15;margin:6px 0 12px;max-width:22ch}
.ao-join-box p{color:#E6EEFF;max-width:62ch}
.ao-join-list{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px;max-width:70ch}
.ao-join-list li{position:relative;padding-left:28px;color:#E6EEFF}
.ao-join-list li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#fff;color:#1E4FD6;font-weight:800;font-size:.8rem;display:grid;place-items:center}
.ao-join-list b{color:#fff}
.ao-join-cta{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 10px}
.ao-join-box .btn.gold{background:#fff;color:#1E4FD6;border-color:#fff}
.ao-join-box .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.ao-join-note{font-size:.82rem;color:#C9D8FA!important}
@media(max-width:860px){.phero .wrap.ao-hwrap{grid-template-columns:1fr}.ao-hfig{justify-self:center;max-width:380px;order:2}}
.ao-htxt{display:grid;gap:10px;min-width:0;align-content:center}
.ao-htxt>*{margin-block:0}
.ao-hero .ao-title{font-size:clamp(2.6rem,7vw,5.2rem)!important}
.ao-join-box{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(18px,4vw,48px);align-items:center}
.ao-join-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.ao-join-steps li{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:12px 14px;color:#fff;font-weight:600}
.ao-join-steps b{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:#1E4FD6;display:grid;place-items:center}
@media(max-width:860px){.ao-join-box{grid-template-columns:1fr}}
.ao-join-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin:6px 0 10px}
.ao-join-cols h3{color:#fff;font-size:1.05rem;margin:10px 0 0}
.ao-join-cols .ao-join-list{margin:10px 0 4px}
.ao-join-home .ao-join-box h2{max-width:30ch}
@media(max-width:720px){.ao-join-cols{grid-template-columns:1fr}}

/* Unduh aplikasi Android (Google Play) */
.ao-gp{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px 6px 14px;border-radius:12px;background:#0E1E3A;color:#fff!important;text-decoration:none;border:1px solid #0E1E3A;width:fit-content}
.ao-gp:hover{background:#1E4FD6;border-color:#1E4FD6}.ao-gp span{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:1.02rem}.ao-gp small{font-size:.68rem;font-weight:500;opacity:.9;text-transform:uppercase;letter-spacing:.04em}
.ao-apps{padding-top:8px}.ao-apps h2{max-width:26ch;margin:6px 0 8px}.ao-apps-lead{color:var(--mute);max-width:62ch;margin:0 0 18px}
.ao-apps-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ao-app{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.ao-app h3{margin:0;font-size:1.2rem;color:var(--ivory)}.ao-app p{margin:0;color:var(--mute)}.ao-app ul{margin:0;padding-left:18px;color:var(--ivory);display:grid;gap:4px}
.ao-app-tag{display:inline-block;padding:3px 12px;border-radius:99px;background:#E4ECFB;color:#1E4FD6;font-weight:700;font-size:.8rem}
.ao-app .ao-gp{margin-top:6px}.ao-app-sub{color:#1E4FD6;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.ao-apps-note{margin:14px 0 0;color:var(--mute);font-size:.82rem}
.ao-join-apps{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0}.ao-join-apps>span{color:#fff;font-weight:600;margin-right:4px}
.ao-join-box .ao-gp{background:#fff;color:#0E1E3A!important;border-color:#fff}.ao-join-box .ao-gp:hover{background:#E4ECFB;color:#0E1E3A!important}
@media(max-width:720px){.ao-apps-grid{grid-template-columns:1fr}.ao-gp{width:100%;justify-content:center}}

/* Animasi promosi di header Mitra Advokat */
.ao-promo{padding:14px 0 0}.ao-carousel{position:relative;border-radius:20px;overflow:hidden;background:#EAF0FB;box-shadow:0 22px 50px -26px rgba(14,30,58,.45);border:1px solid var(--line)}
.ao-slides{list-style:none;margin:0;padding:0;position:relative;aspect-ratio:2048/768}
.ao-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.ao-slide.on{opacity:1;visibility:visible;z-index:1}
.ao-slide picture,.ao-slide img{display:block;width:100%;height:100%}.ao-slide img{object-fit:cover;transform-origin:70% 50%}
.ao-slide.on img{animation:aoKen 9s ease-out both}
@keyframes aoKen{from{transform:scale(1)}to{transform:scale(1.045)}}
.ao-hot{position:absolute;display:block;border-radius:999px;z-index:2;outline-offset:2px}
.ao-hot-cta{animation:aoPulse 2.4s ease-out infinite}
@keyframes aoPulse{0%{box-shadow:0 0 0 0 rgba(255,193,7,.75)}70%,100%{box-shadow:0 0 0 14px rgba(255,193,7,0)}}
.ao-hot:focus-visible{outline:3px solid #1E4FD6;background:rgba(30,79,214,.12)}
.ao-hot-play{border-radius:10px}
.ao-slide.on::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-120%);animation:aoShine 4.5s ease-in-out 1.2s infinite}
@keyframes aoShine{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
.ao-badge-live{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;background:rgba(14,30,58,.82);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.04em}
.ao-badge-live i{width:9px;height:9px;border-radius:50%;background:#2BD98C;animation:aoBlink 1.4s ease-in-out infinite}
@keyframes aoBlink{50%{opacity:.25;transform:scale(.7)}}
.ao-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:#0E1E3A;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(14,30,58,.25)}
.ao-nav:hover{background:#fff}.ao-prev{left:10px}.ao-next{right:10px}
.ao-dots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
.ao-dots button{width:44px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.ao-dots b{display:block;width:34px;height:5px;border-radius:9px;background:rgba(14,30,58,.28);overflow:hidden;position:relative}
.ao-dots b::after{content:"";position:absolute;inset:0;background:#1E4FD6;transform:scaleX(0);transform-origin:left}
.ao-dots [aria-selected=true] b::after{animation:aoBar var(--ao-t,6s) linear forwards}
.ao-carousel.paused .ao-dots [aria-selected=true] b::after{animation-play-state:paused}
@keyframes aoBar{to{transform:scaleX(1)}}
@media(max-width:640px){.ao-promo{padding-top:8px}.ao-nav{width:36px;height:36px;font-size:22px}.ao-badge-live{top:6px;left:6px;font-size:.62rem;padding:3px 9px}.ao-carousel{border-radius:14px}.ao-dots{bottom:2px}.ao-dots b{width:22px}}
/* gerak masuk teks hero */
.ao-htxt>*{animation:aoUp .7s ease both}.ao-htxt>:nth-child(2){animation-delay:.08s}.ao-htxt>:nth-child(3){animation-delay:.16s}.ao-htxt>:nth-child(4){animation-delay:.24s}.ao-htxt>:nth-child(5){animation-delay:.32s}.ao-htxt>:nth-child(6){animation-delay:.4s}
@keyframes aoUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ao-hfig{animation:aoFloat 6s ease-in-out infinite}@keyframes aoFloat{50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.ao-slide,.ao-slide img,.ao-slide::after,.ao-hot-cta,.ao-badge-live i,.ao-htxt>*,.ao-hfig,.ao-dots b::after{animation:none!important;transition:none!important}.ao-dots [aria-selected=true] b::after{transform:scaleX(1)}}
@media(max-width:640px){.ao-nav{display:none}}
.ao-nav{opacity:0;transition:opacity .2s}.ao-carousel:hover .ao-nav,.ao-nav:focus-visible{opacity:1}
.ao-dots{position:static;transform:none;justify-content:center;background:#EAF0FB;padding:2px 0}
@media(max-width:640px){.ao-dots{bottom:auto}.ao-dots button{height:20px}}

/* Efek geser (slide) bergantian */
.ao-slide{transition:transform .8s cubic-bezier(.65,0,.25,1),opacity .8s ease,visibility .8s;transform:translateX(100%);opacity:1}
.ao-slide.on{transform:none;visibility:visible;z-index:2}
.ao-slide.from-r{transform:translateX(100%);transition:none;visibility:visible}.ao-slide.from-l{transform:translateX(-100%);transition:none;visibility:visible}
.ao-slide.out{visibility:visible;z-index:1}.ao-slide.out.to-l{transform:translateX(-100%)}.ao-slide.out.to-r{transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){.ao-slide{transition:none!important}}