html {
  scroll-behavior: smooth;
}

/* Global Styles */
body {
  font-family: "Konnect", sans-serif;
}

/* Mobile Menu */
#mobile-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  &.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Language */
.tr-link.active::before {
  content: "( ";
  color: #ffde40;
  font-weight: bold;
}

.tr-link.active::after {
  content: " )";
  color: #ffde40;
  font-weight: bold;
}

/* Language */
.en-link.active::before {
  content: "( ";
  color: #ffde40;
  font-weight: bold;
}

.en-link.active::after {
  content: " )";
  color: #ffde40;
  font-weight: bold;
}

/* Swiper Styles */
.swiper {
  width: 100%;
  height: 40svh;
}

.swiper-slide {
  text-align: center;
  background: #334155;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img,
.swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fcd34d !important;
}

.swiper-pagination-bullet-active {
  background: #fcd34d !important;
}

/* Custom Colors */
.brand-yellow-bg {
  background-color: #ffde40;
}
.brand-yellow-text {
  color: #ffde40;
}
.brand-yellow-border {
  border-color: #ffde40;
}
.brand-red-bg {
  background-color: #ed4036;
}
.brand-red-text {
  color: #ed4036;
}
.brand-red-border {
  border-color: #ed4036;
}
.brand-blue-bg {
  background-color: #0000ff;
}
.brand-blue-text {
  color: #0000ff;
}
.brand-blue-border {
  border-color: #0000ff;
}
.brand-gray-bg {
  background-color: #343649;
}
.brand-gray-text {
  color: #343649;
}
.brand-gray-border {
  border-color: #343649;
}

/* Küçük Ekranlar (`sm:` - 640px ve üstü) */
@media (min-width: 640px) {
  /* Tailwind'in `sm:` sınıflarına karşılık gelir */
}

/* Orta Boyutlu Ekranlar (`md:` - 768px ve üstü) */
@media (min-width: 768px) {
  /* Tailwind'in `md:` sınıflarına karşılık gelir */
}

/* Büyük Ekranlar (`lg:` - 1024px ve üstü) */
@media (min-width: 1024px) {
  /* Tailwind'in `lg:` sınıflarına karşılık gelir */
  .swiper {
    height: 60svh;
  }
}

/* Daha Büyük Ekranlar (`xl:` - 1280px ve üstü) */
@media (min-width: 1280px) {
  /* Tailwind'in `xl:` sınıflarına karşılık gelir */
  .swiper {
    height: 80svh;
  }
}

/* En Büyük Ekranlar (`2xl:` - 1536px ve üstü) */
@media (min-width: 1536px) {
  /* Tailwind'in `2xl:` sınıflarına karşılık gelir */
}