.rana-hizmetler{
  --rh-adet:1;
  --rh-aralik:20px;
  position:relative;
}
@media (min-width:768px){ .rana-hizmetler{ --rh-adet:2; } }
@media (min-width:1024px){ .rana-hizmetler{ --rh-adet:3; } }

.rana-hizmetler__iz{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--rh-adet) - 1) * var(--rh-aralik)) / var(--rh-adet));
  gap:var(--rh-aralik);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:30px 0 0;
}
.rana-hizmetler__iz::-webkit-scrollbar{ display:none; }
.rana-hizmetler__iz:focus-visible{ outline:3px solid var(--rana-yesil); outline-offset:4px; border-radius:16px; }
.rana-hizmetler__kart{ scroll-snap-align:start; min-width:0; display:flex; }

.rana-hizmet{ flex-direction:column; width:100%; background:#fff; border:1px solid var(--rana-kenar-acik); border-radius:16px; overflow:hidden; transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
:root .rana-hizmet{ display:flex; text-decoration:none; }
.rana-hizmet:hover{
  border-color:var(--rana-yesil);
  box-shadow:0 14px 30px rgba(92,120,87,.15);
  transform:translateY(-4px);
}

.rana-hizmet__gorsel{
  display:block; width:100%; aspect-ratio:4/3;
  background-size:cover; background-position:center;
  background-color:var(--rana-acik);
}
.rana-hizmet__gorsel--bos{
  background-image:linear-gradient(135deg, var(--rana-acik) 0%, #DDE8D9 100%);
}

.rana-hizmet__govde{
  display:flex; flex-direction:column; gap:12px;
  flex:1; padding:18px 20px 20px;
}
.rana-hizmet__ad{ letter-spacing:-.01em; }
:root .rana-hizmet__ad{ color:var(--rana-ink); font-size:17px; font-weight:700; line-height:1.35; }
.rana-hizmet__bag{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:999px; background:var(--rana-acik); line-height:1.2; transition:background .22s ease, color .22s ease; }
:root .rana-hizmet__bag{ color:var(--rana-derin); font-size:14px; font-weight:700; }
.rana-hizmet__bag svg{ width:15px; height:15px; }
.rana-hizmet:hover .rana-hizmet__bag{ background:var(--rana-sari); }
:root .rana-hizmet:hover .rana-hizmet__bag{ color:var(--rana-sari-ink); }
.rana-hizmet:focus-visible{ outline:3px solid var(--rana-yesil); outline-offset:3px; }

.rana-hizmetler__noktalar{
  display:flex; justify-content:center; align-items:flex-start; gap:8px;
  height:50px; padding-top:25px; box-sizing:border-box;
}
.rana-hizmetler .rana-hizmetler__nokta,
.rana-hizmetler .rana-hizmetler__nokta:hover,
.rana-hizmetler .rana-hizmetler__nokta:focus{
  -webkit-appearance:none; appearance:none;
  display:block; flex:none; box-sizing:content-box;
  width:9px; height:9px; min-width:0; min-height:0; margin:0; padding:0;
  border:0; border-radius:5px; box-shadow:none;
  background:var(--rana-koyu); color:transparent;
  font-size:0; line-height:0; letter-spacing:0; text-transform:none;
  opacity:.28; cursor:pointer;
  transition:opacity .2s ease, width .2s ease;
}
.rana-hizmetler .rana-hizmetler__nokta[aria-current="true"]{ opacity:1; width:26px; }
.rana-hizmetler .rana-hizmetler__nokta:focus-visible{ outline:2px solid var(--rana-yesil); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .rana-hizmetler__iz{ scroll-behavior:auto; }
  .rana-hizmet{ transition:none; }
  .rana-hizmet:hover{ transform:none; }
}