.tab-shape-parallelogram {
  --tab-slant: 5px;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  -webkit-clip-path: polygon(var(--tab-slant) 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%);
  clip-path: polygon(var(--tab-slant) 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%);
  backface-visibility: hidden;
  transform: translateZ(0);
}

#kategoriTabs .tab-shape-first {
  --tab-slant: 5px;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%) !important;
}

#categoryControls {
  padding-left: 0 !important;
  margin-left: 0 !important;
  overflow-x: visible !important;
}

#kategoriTabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 !important;
  align-items: center;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

#kategoriTabs > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#kategoriTabs li {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

#kategoriTabs li:not(:last-child) {
  margin-right: -1px !important;
}

#kategoriTabs .tab-btn,
#kategoriTabs .tab-main-option {
  min-height: 36px;
  padding: 0.42rem 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin: 0 !important;
  border-radius: 0 !important;
}

#mainCategoryButton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  --tab-slant: 5px;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%) !important;
}

#kategoriTabs li:first-child .tab-shape-parallelogram {
  margin-left: 9px !important;
}

@media (max-width: 767px) {
  #categoryControls {
    overflow-x: auto !important;
  }

  #kategoriTabs {
    overflow-x: auto !important;
  }
}

.tab-main-btn {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%) !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
}

.tab-main-btn:hover,
.tab-main-btn:focus {
  background: linear-gradient(90deg, #ea580c 0%, #f97316 100%) !important;
  color: #ffffff !important;
}

.tab-main-option {
  border: 1px solid #fdba74;
  background: #ffedd5;
  color: #9a3412;
  transition: all 0.2s ease;
}

.tab-main-option:hover {
  border-color: #ea580c;
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
  color: #ffffff;
}

.tab-main-option.active {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
  color: #ffffff;
  border-color: #ea580c;
}