/* input'ları kesin gizle */
.wrap > input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
}

/* layout */
.wrap{
  display:flex;
  align-items:flex-start;
  gap:24px;
}

/* SOL TAB ALANI: 6 satır sabit */
.tabs{
  width:100%;
  max-width:240px;
  position: sticky;
  top: 24px;
  align-self:flex-start;

  display:grid;
  grid-template-rows: repeat(6, 72px);
  align-items:center;

  position:relative;
  padding: 0;              /* <-- 24px 0 yerine 0 */
}

/* LABEL: satırı doldursun */
.tabs label{
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  color:#525d6f;

  transition:opacity .25s ease;
  user-select:none;

  display:flex;              /* <-- ortalama için */
  align-items:center;
  justify-content:flex-end;  /* sağa yasla */

  height:72px;               /* <-- grid satırı ile aynı */
  padding-right:24px;        /* sağ boşluk */
  margin:0;

  position:relative;
  z-index:5;
}
.tabs label:hover{ opacity:1; }

/* marker: 1 satır yüksekliği */
.tabs .marker{
  position:absolute;
  left:0;
  top:0;                   /* <-- 24px yerine 0 */
  width:100%;
  height:72px;
  background:#ebf0f4;

  border-radius: 32px 0 0 32px;   /* <-- SOL YUVARLAK */
  box-shadow:32px 32px 48px #2e364315;
  transition:transform .2s ease-in-out;
  z-index:1;
}

/* eski top/bottom varsa gizle */
.tabs .marker #top,
.tabs .marker #bottom{ display:none; }

/* ✅ marker hareketi artık kesin: 72px adım */
#tab1:checked ~ .tabs .marker{ transform: translateY(calc(72px * 0)); }
#tab2:checked ~ .tabs .marker{ transform: translateY(calc(72px * 1)); }
#tab3:checked ~ .tabs .marker{ transform: translateY(calc(72px * 2)); }
#tab4:checked ~ .tabs .marker{ transform: translateY(calc(72px * 3)); }
#tab5:checked ~ .tabs .marker{ transform: translateY(calc(72px * 4)); }
#tab6:checked ~ .tabs .marker{ transform: translateY(calc(72px * 5)); }


/* sağ içerik paneli */
.contents{
  flex:1;
  padding:32px;
  background:#ebf0f4;
  border-radius:32px;
  box-shadow:32px 32px 48px #2e364315;
}

/* içerik göster/gizle */
.content{ display:none; }
#tab1:checked ~ .contents .c1{ display:block; }
#tab2:checked ~ .contents .c2{ display:block; }
#tab3:checked ~ .contents .c3{ display:block; }
#tab4:checked ~ .contents .c4{ display:block; }
#tab5:checked ~ .contents .c5{ display:block; }
#tab6:checked ~ .contents .c6{ display:block; }