label {
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  color: #525d6f;
  opacity: 0.4;
  transition: opacity 0.4s ease-in-out;
  display: block;
  width: calc(100% - 48px);
  text-align: right;
  z-index: 2;
  user-select: none;
}

input[type="radio"] {
  display: none;
}

.popup {
  width: 90%;
  height: 480px;
  border-radius: 48px;
  box-sizing: border-box;
  border: 16px solid #ebf0f4;
  background-color: #dfe6ed;
  overflow: hidden;
  box-shadow: 16px 16px 48px #2e364330;
  display: flex;
  margin: 50px auto;
}

.tabs {
  width: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  font-family: monospace;
}

.marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.marker #top,
.marker #bottom {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #ebf0f4;
  box-shadow: 32px 32px 48px #2e364315;
  transition: transform 0.35s ease-in-out;
}

/* TOP marker (mulai dari atas) */
.marker #top {
  top: 0;
  height: calc(100% / 3 * 2); /* cover max = 2 tab */
  border-radius: 0 0 32px 0;
  transform-origin: top; /* tumbuh dari atas ke bawah */
  transform: scaleY(0); /* default: tidak menutup */
}

/* BOTTOM marker (mulai dari bawah) */
.marker #bottom {
  bottom: 0;
  height: calc(100% / 3 * 2); /* cover max = 2 tab */
  border-radius: 0 32px 0 0;
  transform-origin: bottom; /* tumbuh dari bawah ke atas */
  transform: scaleY(0); /* default: tidak menutup */
}

.content {
  flex: 1;
  padding: 28px;
  overflow: auto;
  box-sizing: border-box;
  font-family: monospace;
}

.content .panel {
  display: none;
  background-color: #dfe6ed;
}

.panel h2 {
  margin-top: 0;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: monospace;
  font-size: 20px;
  color: #394550;
}

.panel p {
  font-size: 13px;
  line-height: 1.6;
  color: #5b6570;
}

.panel h2 {
  margin-top: 0;
  margin-bottom: 4px; /* kecilkan jarak ke bawah */
}

.panel > p {
  margin-top: 0; /* hilangkan jarak ke atas */
  margin-bottom: 12px; /* jarak kecil ke bawah (opsional) */
}

.panel .list-detail {
  margin-left: 0;
  padding-left: 0;
  list-style: none; /* hilangkan bullet default */
}

.panel .list-detail li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 18px; /* kasih ruang buat segitiga */
}

.panel .list-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent; /* sisi atas transparan */
  border-bottom: 5px solid transparent; /* sisi bawah transparan */
  border-left: 8px solid #394550; /* segitiga menunjuk ke kanan (ke arah teks) */
}

/* === LABEL SELECTED STATE === */
label:hover,
#tab1:checked ~ .tabs label[for="tab1"],
#tab2:checked ~ .tabs label[for="tab2"],
#tab3:checked ~ .tabs label[for="tab3"],
#tab1-2:checked ~ .tabs label[for="tab1-2"],
#tab2-2:checked ~ .tabs label[for="tab2-2"],
#tab3-2:checked ~ .tabs label[for="tab3-2"],
#tab4-2:checked ~ .tabs label[for="tab4-2"] {
  opacity: 1;
}

/* === MARKER UNTUK 3 TAB === */
/* tab1 aktif → cover 2 tab bawah */
#tab1:checked ~ .tabs .marker #top {
  transform: scaleY(0);
}
#tab1:checked ~ .tabs .marker #bottom {
  transform: scaleY(1);
}

/* tab2 aktif → cover 1 atas + 1 bawah */
#tab2:checked ~ .tabs .marker #top {
  transform: scaleY(0.5);
}
#tab2:checked ~ .tabs .marker #bottom {
  transform: scaleY(0.5);
}

/* tab3 aktif → cover 2 atas */
#tab3:checked ~ .tabs .marker #top {
  transform: scaleY(1);
}
#tab3:checked ~ .tabs .marker #bottom {
  transform: scaleY(0);
}

/* tampilkan panel (3 tab) */
#tab1:checked ~ .content .panel1,
#tab2:checked ~ .content .panel2,
#tab3:checked ~ .content .panel3 {
  display: block;
}

/* === MARKER UNTUK 4 TAB (INSTANCE KEDUA) === */
/* tab1-2 aktif → cover 3 tab bawah */
#tab1-2:checked ~ .tabs .marker #top {
  transform: scaleY(0);
}
#tab1-2:checked ~ .tabs .marker #bottom {
  transform: scaleY(1.1);
}

/* tab2-2 aktif → cover 1 atas + 2 bawah */
#tab2-2:checked ~ .tabs .marker #top {
  transform: scaleY(0.4);
}
#tab2-2:checked ~ .tabs .marker #bottom {
  transform: scaleY(0.7);
}

/* tab3-2 aktif → cover 2 atas + 1 bawah */
#tab3-2:checked ~ .tabs .marker #top {
  transform: scaleY(0.8);
}
#tab3-2:checked ~ .tabs .marker #bottom {
  transform: scaleY(0.25);
}

/* tab4-2 aktif → cover 3 atas */
#tab4-2:checked ~ .tabs .marker #top {
  transform: scaleY(1.25);
}
#tab4-2:checked ~ .tabs .marker #bottom {
  transform: scaleY(0);
}

/* tampilkan panel (4 tab) */
#tab1-2:checked ~ .content .panel1-2,
#tab2-2:checked ~ .content .panel2-2,
#tab3-2:checked ~ .content .panel3-2,
#tab4-2:checked ~ .content .panel4-2 {
  display: block;
}