/* v1.4.34 — balanced editorial/access composition around viewport center. */

@media (min-width:981px){
  /*
   * Dua kolom sama besar + gap tetap membuat garis tengah viewport menjadi
   * acuan nyata: editorial menempel ke sisi dalam kiri, akses ke sisi dalam kanan.
   */
  .ef-shell{
    width:min(1180px,calc(100vw - 72px))!important;
    max-width:1180px!important;
    margin-inline:auto!important;
  }

  .ef-main{
    width:100%!important;
    max-width:none!important;
    margin-inline:auto!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:72px!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* Editorial melekat ke garis tengah dari sisi kiri, namun tubuh copy lebih ke kiri. */
  .ef-editorial{
    width:min(100%,610px)!important;
    max-width:610px!important;
    justify-self:end!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .ef-editorial-brand,
  .ef-title,
  .ef-copy,
  .ef-trust{
    position:relative;
    left:-18px;
  }

  /* Role dimulai pada jarak yang sama dari garis tengah, bukan di ujung kanan viewport. */
  .ef-access{
    width:276px!important;
    max-width:276px!important;
    justify-self:start!important;
    align-items:stretch!important;
  }

  .ef-access-head,
  .ef-role-list,
  .ef-role{
    width:276px!important;
    max-width:276px!important;
  }

  .ef-access-head{
    text-align:center!important;
    margin-bottom:12px!important;
  }

  /* Semua role sama, sengaja hanya selebar kebutuhan label terpanjang. */
  .ef-role{
    height:58px!important;
    min-height:58px!important;
    grid-template-columns:42px minmax(0,1fr) 14px!important;
    gap:11px!important;
    padding:7px 13px 7px 8px!important;
    border-radius:14px!important;
  }

  .ef-role-icon{
    width:42px!important;
    height:42px!important;
    border-radius:12px!important;
  }
  .ef-role-icon svg{
    width:21px!important;
    height:21px!important;
  }
  .ef-role-name{
    font-size:1.46rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .ef-role-arrow{
    font-size:1.78rem!important;
  }

  /* Ornament cyan/hijau bawah kiri dihilangkan sepenuhnya. */
  .ef-ribbon{
    display:none!important;
  }

  /* Footer: item kedua tepat di tengah viewport, Y tidak diubah. */
  .ef-footer{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    margin-inline:auto!important;
    justify-content:flex-start!important;
  }
  .ef-footer .ef-footer-item:nth-child(2){
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    white-space:nowrap!important;
  }

  /* Naikkan crop foto agar fasad, gerbang dan signage tetap berada di ruang tengah. */
  body.guardrail-landing{
    background-position:center center, center center, center center, 60% 28%!important;
  }
}

@media (min-width:1500px){
  body.guardrail-landing{
    background-position:center center, center center, center center, 61% 27%!important;
  }
}

/* Laptop pendek: tetap simetris, kartu dipadatkan sedikit lagi agar seluruh layar muat. */
@media (min-width:981px) and (max-height:760px){
  .ef-shell{
    width:min(1120px,calc(100vw - 64px))!important;
    max-width:1120px!important;
  }
  .ef-main{
    column-gap:64px!important;
  }
  .ef-editorial{
    max-width:580px!important;
  }
  .ef-editorial-brand,
  .ef-title,
  .ef-copy,
  .ef-trust{
    left:-14px;
  }
  .ef-access,
  .ef-access-head,
  .ef-role-list,
  .ef-role{
    width:260px!important;
    max-width:260px!important;
  }
  .ef-role{
    height:52px!important;
    min-height:52px!important;
    grid-template-columns:38px minmax(0,1fr) 13px!important;
    gap:10px!important;
    padding:6px 12px 6px 7px!important;
  }
  .ef-role-icon{
    width:38px!important;
    height:38px!important;
  }
  .ef-role-icon svg{
    width:19px!important;
    height:19px!important;
  }
  .ef-role-name{
    font-size:1.3rem!important;
  }
  body.guardrail-landing{
    background-position:center center, center center, center center, 60% 24%!important;
  }
}

@media (min-width:981px) and (max-height:680px){
  .ef-shell{
    width:min(1080px,calc(100vw - 56px))!important;
    max-width:1080px!important;
  }
  .ef-main{column-gap:56px!important;}
  .ef-editorial{max-width:560px!important;}
  .ef-access,
  .ef-access-head,
  .ef-role-list,
  .ef-role{
    width:248px!important;
    max-width:248px!important;
  }
  .ef-role-name{font-size:1.22rem!important;}
}

/* Tablet/HP memakai layout responsif versi sebelumnya; hanya ornament lama tetap dihapus. */
@media (max-width:980px){
  .ef-ribbon{display:none!important;}
}