/* Header */

.header{position:sticky;top:0;z-index:100;width:100%;background:rgba(0,0,0,.45);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{max-width:1320px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand img{height:auto;width:auto;max-width:180px;display:block}

.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:#e5e7eb;font-size:18px;cursor:pointer;transition:background .2s ease, transform .15s ease}
.menu-toggle:hover{background:rgba(255,255,255,.12)}
.menu-toggle i{transition:transform .25s ease}
.header.open .menu-toggle i{transform:rotate(90deg)}

.menu-bar{max-width:1320px;margin:0 auto;overflow:hidden;max-height:0;padding:0 16px;display:grid;grid-auto-flow:column;gap:12px;transition:max-height .28s ease}
.menu-bar a{color:#e5e7eb;text-decoration:none;font-weight:700;font-size:14px;padding:10px 12px;border-radius:10px}
.menu-bar a:hover{background:rgba(255,255,255,.08)}
.header.open .menu-bar{max-height:64px}
@media (max-width:640px){
  .menu-bar{grid-auto-flow:row;grid-template-columns:1fr;gap:6px}
  .header.open .menu-bar{max-height:300px}
}

/* Navigasi bawah */
.fab-wrap{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  padding:0 0 calc(env(safe-area-inset-bottom) + 14px);
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.fab{
  pointer-events:auto;
  background:rgba(10,10,16,.78);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-radius:22px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  padding:6px 16px;
  display:flex;
  gap:8px;
  max-width:460px;
  width:90%;
  justify-content:space-around;
}
.fab-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  padding:.55rem 0;
  color:#cbd5e1;
  text-decoration:none;
  transition:background .2s, color .2s, transform .2s, box-shadow .25s;
  border-radius:14px;
}
.fab-item:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.fab-item i{
  font-size:1.3rem;
  transition:transform .25s ease;
}
.fab-item span{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
}
.fab-item.active{
  color:#fff;
  background:rgba(99,102,241,.18);
  box-shadow:0 0 12px rgba(99,102,241,.3);
}
.fab-item.active i{
  color:#818cf8;
  transform:rotate(5deg) scale(1.05);
}

.fab-spacer{height:88px;}
@media(min-width:768px){.fab-spacer{height:0;}}

/* Footer */
.page-footer{padding-bottom:80px}