html, body {
  height: 100%;    
  width: 100%;
  margin: 0;
  padding: 0; 
}

.content-area {
  display: absolute;
  height: 100%;
  width: 100%;

  margin: 0;
  padding: 0;
  overflow: hidden;
}

.scroll-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.scroll-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

.scroll-slide {
  height: 100%;
  width: 100%;
}






.scroll-navigation {
  position: fixed;
  display: flex;
  gap: 8px;
  z-index: 9999;
  align-items: center;
}

.scroll-navigation .dot {
  border-radius: 50%;
  transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.scroll-navigation .dot.active {
  /* Renk ve boyut JS'den ayarlanacak */
}