/* Universal auth photo · Gerbang Rumah Pergerakan v6
   Asset contains illustration ONLY. The RPIA logo and titles stay live HTML
   from the website; no generated lettering or logo appears in this picture.
   Desktop: side-by-side; portrait: integrated top photo + form sheet.
*/
:root{--ra-auth-gateway-photo:url('/assets/img/radar-auth/gerbang-rumah-pergerakan-v1.webp')}
.raAuthVisual:before,
.raInviteStandalone .raInviteVisual:before{content:none!important;display:none!important}
.raAuthScreen .raAuthVisual,
.raInviteStandalone .raInviteVisual{background:#0757a6!important;isolation:isolate}
.raMobileHeroContent,
.raInviteStandalone .raMobileHeroContent,
.raAuthScreen .raMobileHeroContent{
  position:absolute!important;inset:0!important;display:block!important;
  overflow:hidden!important;width:100%!important;height:100%!important;
}
.raMobileHeroContent:after{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,31,70,.39) 0%,rgba(1,38,84,.12) 23%,transparent 48%);
}
.raAuthScreen .raAuthVisual .raMobileHeroArt,
.raInviteStandalone .raMobileHeroArt{
  position:absolute!important;z-index:1!important;inset:0!important;left:0!important;top:0!important;
  display:block!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;min-width:0!important;
  object-fit:cover!important;object-position:center 50%!important;
  margin:0!important;transform:none!important;filter:none!important;
  border-radius:0!important;
}
.raAuthScreen .raMobileHeroBrand,
.raInviteStandalone .raMobileHeroBrand{
  position:absolute!important;z-index:4!important;top:clamp(23px,4vh,42px)!important;
  left:clamp(20px,3.6vw,40px)!important;right:18px!important;
  display:flex!important;align-items:center!important;gap:11px!important;
  width:auto!important;max-width:calc(100% - 38px)!important;margin:0!important;padding:0!important;
  color:#fff!important;text-decoration:none!important;
  text-shadow:0 2px 9px rgba(0,36,76,.27);
}
.raAuthScreen .raMobileHeroBrand img,
.raInviteStandalone .raMobileHeroBrand img{
  width:clamp(38px,4vw,51px)!important;height:clamp(38px,4vw,51px)!important;
  flex:0 0 auto!important;object-fit:contain!important;filter:drop-shadow(0 3px 7px rgba(0,0,0,.13))!important;
}
.raMobileHeroBrand span{display:block!important;min-width:0!important}
.raAuthScreen .raMobileHeroBrand b,.raInviteStandalone .raMobileHeroBrand b{
  display:block!important;max-width:380px!important;overflow-wrap:break-word!important;
  color:#fff!important;font-size:clamp(12px,1.2vw,16px)!important;font-weight:850!important;
  line-height:1.28!important;letter-spacing:-.025em!important;
}
.raAuthScreen .raMobileHeroBrand small,.raInviteStandalone .raMobileHeroBrand small{
  display:block!important;margin-top:3px!important;color:#e8f4ff!important;
  font-size:clamp(9px,.85vw,11px)!important;font-weight:800!important;
  line-height:1.35!important;letter-spacing:.13em!important;
}
/* The illustration is the same in login, registration, recovery, OTP and invitation.
   No repeated logo overlay, and text comes from DOM (selectable/translatable). */
@media (min-width:1025px) {
 .raAuthScreen .raAuthVisual .raMobileHeroArt,
 .raInviteStandalone .raMobileHeroArt{object-position:center 47%!important}
 .raAuthScreen .raMobileHeroBrand,
 .raInviteStandalone .raMobileHeroBrand{top:32px!important;left:28px!important}
}
/* Portrait phone/tablet: image crop keeps the gateway as focal point, sheet remains
   a full-width connected surface rather than a floating desktop card. */
@media (max-width:620px), (max-width:1024px) and (orientation:portrait){
  .raAuthScreen .raAuthVisual .raMobileHeroArt,
  .raInviteStandalone .raMobileHeroArt{
    object-position:center 39%!important;
    height:100%!important;width:100%!important;top:0!important;left:0!important;
  }
  body.raAuthMode .raAuthScreen .raAuthVisual,
  body.raInviteStandalone .raInviteVisual{
    height:clamp(205px,30dvh,330px)!important;
    min-height:205px!important;
    background:#0757a6!important;
  }
  body.raAuthMode .raAuthScreen .raMobileHeroBrand,
  body.raInviteStandalone .raMobileHeroBrand{
    top:calc(17px + env(safe-area-inset-top,0px))!important;
    left:clamp(17px,4.6vw,30px)!important;
    right:12px!important;
    max-width:calc(100% - 28px)!important;
  }
  body.raAuthMode .raAuthScreen .raMobileHeroBrand img,
  body.raInviteStandalone .raMobileHeroBrand img{
    width:clamp(38px,7vw,48px)!important;height:clamp(38px,7vw,48px)!important;
  }
  body.raAuthMode .raAuthScreen .raMobileHeroBrand b,
  body.raInviteStandalone .raMobileHeroBrand b{font-size:clamp(11px,2.7vw,14px)!important}
  body.raAuthMode .raAuthScreen .raMobileHeroBrand small,
  body.raInviteStandalone .raMobileHeroBrand small{font-size:9px!important;letter-spacing:.11em!important}
  body.raAuthMode .raAuthScreen .raAuthPane,
  body.raInviteStandalone .raInvitePane{position:relative!important;z-index:4!important;margin-top:-26px!important}
  .raInviteStandalone .raInviteShell{min-height:100dvh!important}
  .raInviteStandalone .raInvitePane{min-height:calc(70dvh + 25px)!important}
  .raAuthScreen .raAuthIntro{max-width:50ch}
}
/* Narrow landscape: retain a meaningful photo strip and scroll the form naturally.
   The old layout hid this image completely, contradicting the one-photo decision. */
@media (orientation:landscape) and (max-height:580px) and (max-width:950px){
  body.raAuthMode .raAuthScreen{display:block!important;width:min(540px,100%)!important;overflow:visible!important}
  body.raAuthMode .raAuthScreen .raAuthVisual{
    display:block!important;position:relative!important;
    height:155px!important;min-height:155px!important;
    width:100%!important;overflow:hidden!important;border-radius:21px 21px 0 0!important;
    margin:0!important;box-shadow:none!important;
  }
  body.raAuthMode .raAuthScreen .raMobileHeroContent{display:block!important}
  body.raAuthMode .raAuthScreen .raAuthVisual .raMobileHeroArt{object-position:center 41%!important}
  body.raAuthMode .raAuthScreen .raMobileHeroBrand{top:15px!important;left:20px!important}
  body.raAuthMode .raAuthScreen .raAuthPane{
    margin:-16px 0 0!important;border-radius:20px!important;
    padding:25px 25px 30px!important;position:relative!important;z-index:4!important;
  }
  body.raInviteStandalone .raInviteShell{
    display:block!important;width:min(540px,calc(100% - 26px))!important;
    margin:13px auto!important;min-height:0!important;overflow:visible!important;
    border-radius:20px!important;
  }
  body.raInviteStandalone .raInviteVisual{height:155px!important;min-height:155px!important}
  body.raInviteStandalone .raInvitePane{margin-top:-16px!important;border-radius:20px!important;padding:24px!important}
}
@media (max-width:390px) and (orientation:portrait){
  body.raAuthMode .raAuthScreen .raMobileHeroBrand b,
  body.raInviteStandalone .raMobileHeroBrand b{font-size:10.5px!important}
  body.raAuthMode .raAuthScreen .raMobileHeroBrand small,
  body.raInviteStandalone .raMobileHeroBrand small{font-size:8.5px!important}
  body.raAuthMode .raAuthScreen .raAuthVisual,
  body.raInviteStandalone .raInviteVisual{height:205px!important;min-height:205px!important}
}
@media (prefers-reduced-motion:reduce){
  .raAuthScreen .raMobileHeroArt,.raInviteStandalone .raMobileHeroArt{transition:none!important;animation:none!important}
}
/* Last-mile specificity against legacy !important portrait image sizing. */
@media (max-width:620px), (max-width:1024px) and (orientation:portrait){
 body.raAuthMode .raAuthScreen .raAuthVisual .raMobileHeroArt{
   position:absolute!important;inset:0!important;left:0!important;top:0!important;
   width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
   object-fit:cover!important;object-position:center 39%!important;
   transform:none!important;filter:none!important;
 }
}
@media (min-width:1025px){
 .raAuthScreen .raAuthPane>.raPmiiBrand{display:none!important}
}
@media (orientation:landscape) and (max-height:580px) and (max-width:950px){
 body.raAuthMode .raAuthScreen .raAuthPane>.raPmiiBrand{display:none!important}
}

/* Formulir panjang tidak memakai ilustrasi besar, tetapi headernya tetap
   memakai visual gerbang yang sama; teks tetap HTML biasa. */
@media (max-width:620px), (max-width:1024px) and (orientation:portrait){
 body.raAuthMode .raAuthDetails--refined .raAuthDetailsHead{
  background-image:linear-gradient(180deg,rgba(2,44,94,.55),rgba(7,82,160,.50)),url('/assets/img/radar-auth/gerbang-rumah-pergerakan-v1.webp')!important;
  background-size:cover!important;
  background-position:center 40%!important;
  background-color:#0757a6!important;
 }
}