/* assets/css/bek-switch.css */
.bek-switch-container {
    display: flex;
    align-items: center;
}

.bek-switch-label {
    color: #fff;
    margin: 0 10px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.bek-switch-label.active {
    opacity: 1;
}

.bek-switch-toggle {
    position: relative;
    display: inline-block;
    width: 69px;
    height: 34px;
}

.bek-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.bek-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.73);
    transition: .4s;
    border-radius: 34px;
}

.bek-switch-slider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    left: 4px;
    bottom: 2px;
    background-color: #C10078; /* Başlangıçta kırmızı (Store modu) */
    transition: .4s;
    border-radius: 50%;
}

.bek-switch-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    transition: .4s;
}

/* Store ikonu (sol taraf) */
.bek-switch-store-icon {
    left: 11px;
    opacity: 1;
	width: 15px;
	height: auto;
}

/* Studio ikonu (sağ taraf) */
.bek-switch-studio-icon {
    right: 12px;
    left: auto;
    opacity: 0;
}

/* Switch aktif olduğunda (Studio modu) */
.bek-switch-input:checked + .bek-switch-slider {
    background-color: rgba(255, 255, 255, 0.73);
}

.bek-switch-input:checked + .bek-switch-slider:before {
    transform: translateX(31px);
    background-color: #510C76; /* Studio modunda mor */
}

/* İkonların görünürlüğünü değiştir */
.bek-switch-input:checked + .bek-switch-slider .bek-switch-store-icon {
    opacity: 0; /* Store ikonunu gizle */
}

.bek-switch-input:checked + .bek-switch-slider .bek-switch-studio-icon {
    opacity: 1; /* Studio ikonunu göster */
}

.bek-switch-slider:hover {
    background-color: #FFFFFF;
}

/* Switch Container on Other Pages */
.switch-container-in-page .bek-switch-container {
	background-color: #F2F2F2;
    border-radius: 34px;
    padding: 5px 10px;
}

.switch-container-in-page .bek-switch-label[data-mode="studio"] {
  color: #510C76;
}
.switch-container-in-page .bek-switch-label[data-mode="store"] {
	color: #C10078;
}
.switch-container-in-page .bek-switch-label {
	font-size: 30px;
}
.switch-container-in-page .bek-switch-slider:before {
	width: 43px;
	height: 43px;
	left: 20px;
	bottom: 3.5px;
}
.switch-container-in-page .bek-switch-toggle {
	width: 100px;
	height: 50px;
}
.switch-container-in-page .bek-switch-studio-icon svg {
	width: 21px;
	height: auto;
}

.switch-container-in-page .bek-switch-store-icon svg {
	width: 21px;
	height: auto;
}

.switch-container-in-page .bek-switch-studio-icon {
	right: 15px;
}
.switch-container-in-page .bek-switch-icon {
	top: 55%;
}
.switch-container-in-page .bek-switch-label[data-mode="store"].active ~ .bek-switch-toggle .bek-switch-slider:before {
    left: 4px;
}
.switch-container-in-page .bek-switch-store-icon {
	left:15px;
	}
@media screen and (max-width: 768px) {
.switch-container-in-page .bek-switch-container {
	background-color: #F2F2F2;
    border-radius: 34px;
    padding: 5px 10px;
	margin-left: 0;
}
.switch-container-in-page .bek-switch-store-icon {
	left:10px;
	}

.switch-container-in-page .bek-switch-label[data-mode="studio"] {
  color: #510C76;
}
.switch-container-in-page .bek-switch-label[data-mode="store"] {
	color: #C10078;
}
.switch-container-in-page .bek-switch-label {
	font-size: 18px;
}
.switch-container-in-page .bek-switch-slider:before {
	width: 24px;
	height: 24px;
	left: 4px;
	bottom: 1.5px;
}
.switch-container-in-page .bek-switch-toggle {
	width: 55px;
	height: 27px;
}
.switch-container-in-page .bek-switch-studio-icon svg {
	width: 12px;
	height: auto;
}

.switch-container-in-page .bek-switch-store-icon svg {
	width: 12px;
	height: auto;
}

.switch-container-in-page .bek-switch-studio-icon {
	right: 1px;
}
.switch-container-in-page .bek-switch-icon {
	top: 50%;
}
.switch-container-in-page .bek-switch-label[data-mode="store"].active ~ .bek-switch-toggle .bek-switch-slider:before {
    left: 2px;
}
}

.switch-container-in-page .bek-switch-toggle:hover .bek-switch-slider:before {
    left: 4px;
}

.switch-container-in-page .bek-switch-label[data-mode="studio"].active ~ .bek-switch-toggle:hover .bek-switch-slider:before {
    left: 20px;
}

.switch-container-in-page .bek-switch-label[data-mode="store"].active ~ .bek-switch-toggle:hover .bek-switch-slider:before {
    left: 4px;
}

.bek-switch-slider {
    transition: all 0.3s ease;
}

.bek-switch-icon {
    transition: opacity 0.2s ease;
}

.side-menu-studio-icon,
.side-menu-store-icon {
    transition: opacity 0.2s ease;
}