.rp-mb{

  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:18px;
  padding:18px 0; margin:0 0 35px;
  border-top:1px solid var(--rana-kenar-acik);
  border-bottom:1px solid var(--rana-kenar-acik);
  font-family:inherit;
}

.rp-mb__bilgi{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
  color:var(--rana-ink); font-size:15px; font-weight:500;
}
.rp-mb__oge{ display:inline-flex; align-items:center; gap:8px; }
.rp-mb__oge strong{ font-weight:600; }

.rp-mb__ikon{
  width:17px; height:17px; flex:0 0 auto;
  color:var(--rana-yesil); display:block;
}

.rp-mb__kategori{ display:inline-flex; align-items:center; gap:8px; transition:color .22s ease; }
:root .rp-mb__kategori{ color:var(--rana-ink); text-decoration:none; }
:root .rp-mb__kategori:hover{ color:var(--rana-koyu); }
.rp-mb__kategori:hover .rp-mb__ikon{ color:var(--rana-koyu); }
.rp-mb__kategori span{ border-bottom:1px solid transparent; transition:border-color .22s ease; }
.rp-mb__kategori:hover span{ border-bottom-color:var(--rana-yesil); }

.rp-mb__paylas{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rp-mb__paylas-yazi{
  margin-right:4px;
  color:var(--rana-soluk); font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}

.rp-mb__dugme{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:var(--rana-koyu); border:none; line-height:0; transition:background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; }
:root .rp-mb__dugme{ color:#fff; text-decoration:none; }
.rp-mb__dugme svg{ width:15px; height:15px; display:block; }
.rp-mb__dugme:hover{ background:var(--rana-sari); transform:translateY(-3px); box-shadow:0 6px 14px rgba(60,81,56,.22); }
:root .rp-mb__dugme:hover{ color:var(--rana-sari-ink); }
.rp-mb__dugme:focus-visible,
.rp-mb__kategori:focus-visible{
  outline:3px solid var(--rana-yesil); outline-offset:3px; border-radius:9px;
}

@media (max-width:768px){
  .rp-mb{ flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (prefers-reduced-motion: reduce){
  .rp-mb__dugme, .rp-mb__kategori, .rp-mb__kategori span{ transition:none; }
  .rp-mb__dugme:hover{ transform:none; }
}