/* ============================================================
   MENU untuk layar HP — rancangan asli menyembunyikan menu di
   bawah 1000px tanpa pengganti; ini penggantinya.
   ============================================================ */
#tb-burger{ display:none }
@media (max-width:1000px){
  #tb-burger{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; margin-left:auto; cursor:pointer;
    border:1px solid rgba(56,189,248,.34); border-radius:12px;
    background:rgba(15,22,33,.6); backdrop-filter:blur(6px);
    transition:background .2s ease, border-color .2s ease;
  }
  #tb-burger:hover,#tb-burger[aria-expanded="true"]{ background:rgba(34,211,238,.14); border-color:rgba(56,189,248,.8) }
  #tb-burger span{ position:relative; width:20px; height:2px; border-radius:2px; background:var(--cy);
    transition:background .2s ease }
  #tb-burger span::before,#tb-burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px;
    border-radius:2px; background:var(--cy); transition:transform .28s cubic-bezier(.4,0,.2,1), top .2s ease }
  #tb-burger span::before{ top:-6px } #tb-burger span::after{ top:6px }
  #tb-burger[aria-expanded="true"] span{ background:transparent }
  #tb-burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg) }
  #tb-burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg) }
  header .wrap.nav{ gap:10px }
}

#tb-menu{
  position:fixed; inset:0; z-index:95; display:flex; flex-direction:column;
  padding:86px 24px 32px; overflow-y:auto;
  background:linear-gradient(170deg,rgba(8,11,17,.985),rgba(12,17,26,.99));
  backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
body.tb-menu-buka{ overflow:hidden }
body.tb-menu-buka #tb-menu{ opacity:1; visibility:visible; transform:none }
#tb-menu a.butir{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:17px 4px; border-bottom:1px solid rgba(28,40,54,.85);
  color:var(--ink); text-decoration:none;
  font:600 17px "Archivo",system-ui,sans-serif; letter-spacing:.02em;
  opacity:0; transform:translateY(10px);
}
body.tb-menu-buka #tb-menu a.butir{ animation:tb-menu-masuk .38s cubic-bezier(.2,.8,.3,1) forwards }
@keyframes tb-menu-masuk{ to{opacity:1; transform:none} }
#tb-menu a.butir::after{ content:"→"; color:var(--cy); font-size:15px; opacity:.55 }
#tb-menu a.butir:active{ color:var(--cy) }
#tb-menu .kaki{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center }
#tb-menu .kaki a.masuk{
  flex:1; min-width:150px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 20px; border-radius:12px; text-decoration:none;
  border:1px solid rgba(56,189,248,.4); color:var(--ink);
  font:700 13px "Archivo",sans-serif; letter-spacing:.12em; text-transform:uppercase;
}
#tb-menu .kaki a.tender{
  flex:1; min-width:150px; display:inline-flex; align-items:center; justify-content:center;
  padding:15px 20px; border-radius:12px; text-decoration:none;
  background:linear-gradient(135deg,var(--cy),var(--cy2)); color:#04222B;
  font:700 13px "Archivo",sans-serif; letter-spacing:.12em; text-transform:uppercase;
}
#tb-menu .info{ margin-top:22px; color:var(--muted); font-size:13px; line-height:1.7 }
#tb-menu .info b{ color:var(--ink) }
html[dir="rtl"] #tb-menu a.butir::after{ content:"←" }
html[dir="rtl"] #tb-burger{ margin-left:0; margin-right:auto }
@media (prefers-reduced-motion:reduce){ #tb-menu,#tb-menu a.butir{ animation:none!important; transition:none!important } }