body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-image: url('https://karantinaindonesia.go.id/assets/front/img/barantan.png');
  background-size: 350px auto;        /* biar full screen */
  background-position: top right;   /* gambar di tengah */
  background-repeat: no-repeat;  /* jangan diulang */
  background-attachment: fixed;  /* biar gambar tetap saat scroll */
}

h1 {
  color: #2a5d84;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 50px);
  gap: 6px;
  margin-top: 20px;
}

.box {
  border: 1px solid #aaa;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.2s;
  font-weight: bold;
}

.box.uungu { background: #e1bee7; border-color: #8e24aa; }     
.box.hijau { background: #e8f5e9; border-color: #2e7d32; }     
.box.birumuda { background: #bbdefb; border-color: #1565c0; }  
.box.orange { background: #ffe0b2; border-color: #ef6c00; }   
.box.ungujanda { background: #ce93d8; border-color: #6a1b9a; } 
.box.abugray { background: #eeeeee; border-color: #616161; }   
.box.coklat { background: #d7ccc8; border-color: #5d4037; }   
.box.birudongker { background: #c5cae9; border-color: #283593;}
.box.hijaumuda { background: #dcedc8; border-color: #558b2f; } 
.box.coklatmuda { background: #efebe9; border-color: #795548; }
.box.pink { background: #f8bbd0; border-color: #ad1457; }      
.box.tosca { background: #b2dfdb; border-color: #00695c; }     
.box.merah { background: #ffcdd2; border-color: #c62828; }    
.box.abumuda { background: #f5f5f5; border-color: #9e9e9e; }   
.box.hitamputih { background: linear-gradient(45deg, #000, #fff); border-color: #000; }


#legend {
  font-size: 8px;
  max-width: 250px;
}
#legend ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* bagi 2 kolom */
  gap: 5px 8px;                 /* jarak antar item */
}

#legend li {
  margin: 5px 0;
  display: flex;
  align-items: center;
}

#legend .box {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  padding: 0;
  border-radius: 4px;
  border: 2px solid #333;
  cursor: default;
}

#container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

#toc {
  width: 350px;
  font-size: 9px;
}

#toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* bagi 7 kolom */
  gap: 4px 10px; /* jarak antar item */
}

#toc li {
  margin: 8px 0;
}

.box:hover {
  background: #b9daef;
}

#penjelasan {
  margin-top: 25px;
  padding: 15px;
  border: 1px solid #2a5d84;
  border-radius: 10px;
  background: #f3faff;
  display: none;
}