My Checkbox isn't working while Im building a Hamburger Button

Im trying to build a nav bar that have hamburger button to open drop down menus. While building the button, the checkbox dont want to be checked. Here is the HTML code :

  body {
  margin: 0px;
  background-image: url("Images/background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  font-family: 'Titillium Web', sans-serif;
  height: 100%;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
}

html {
  scroll-behavior: smooth;
}


/*NAV BAR*/

.topbar-wrapper {
  display: flex;
  padding: 0px;
  background-color: teal;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.tombol-menu {
  padding: 35px;
}

.tombol-menu .centang {
  position: absolute;
  top: 32px;
  left: 31px;
  cursor: pointer;
  width: 60px;
  height: 60px;
  padding: 35px;
  opacity: 1;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.tombol-menu .tombol-hamburger {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  padding: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tombol-menu .tombol-hamburger>div {
  position: relative;
  width: 100%;
  height: 5px;
  background-color: yellowgreen;
  align-items: center;
  justify-content: center;
}

.tombol-menu .tombol-hamburger>div::before,
.tombol-menu .tombol-hamburger>div::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -17px;
  width: 100%;
  height: 5px;
  background: inherit;
}

.tombol-menu .tombol-hamburger>div::after {
  top: 17px;
}

.tombol-menu .centang:checked+.tombol-hamburger>div {
  transform: rotate(135deg);
}

.logo-img {
  width: 120px;
}

.tombol-search {
  padding: 35px;
}

.topbar-wrapper>div {
  margin-left: 20px;
  font-size: 1em;
}

.navigasi {
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  /*visibility: hidden;*/
  display: flex;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

.navigasi li {
  list-style: none;
}

.navigasi li a {
  display: block;
  text-decoration: none;
  color: lightcoral;
  padding: 1em;
}

.navigasi li a:hover {
  color: lightseagreen;

<header>
  <div class="topbar-wrapper">
    <div class="tombol-menu">
      <input type="checkbox" class="centang" id="centangID">
      <div class="tombol-hamburger">
        <div>

        </div>
      </div>
    </div>
    <div class="logo">
      <a href="index.html">
        <img class="logo-img" src="LOGO.png" alt="">
      </a>
    </div>
    <div class="tombol-search">
      <a href="">Search</a>
    </div>
  </div>
</header>

I think its because my checkbox is inside some DIV, or my code is purely bad.

PS:Im new to HTML and CSS.