.product-family-members-list{
	padding: 50px 0;
}

.product-family-members-list .container{
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
    margin: auto;

}

.product-family-members-list .container > .filters{
	display: flex;
	margin-bottom: 40px;
}

.product-family-members-list .container > .filters > div{
	font-weight: bold;
}

.product-family-members-list .container > .filters > label{
	margin-left: 20px;
}

.product-family-members-list .main_header{
	font-size: var(--wp--preset--font-size--36-px);
	font-weight: bold;
	margin-bottom: 30px;
	line-height: 1.2;
}

.product-family-members-list .members{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
}

.product-family-members-list .container a{
	text-decoration: none;
}


.product-family-members-list .member{
	background-color: black;
	color: white;
	font-size: var(--wp--preset--font-size--22-px);
	font-weight: 500;
	line-height: 1.3;
}

.product-family-members-list .member .texts{
	padding: 15px 20px;
}

.product-family-members-list .member .family_name{
	font-size: var(--wp--preset--font-size--16-px);
	font-weight: 500;
	color: var(--wp--preset--color--pixii-electric);
}

.product-family-members-list .member .member_name_kw span{
	font-size: var(--wp--preset--font-size--32-px);
}


.product-family-members-list .member .images img{
	display: block;
}

.product-family-members-list .member .images {
    position: relative; /* Opened cabinet için konumlandırma referansı */
    width: 100%; /* Kapsayıcının genişliğini doldur */
    height: auto; /* Kapsayıcının yüksekliğini içerikteki resimlere göre ayarla */
    overflow: hidden; /* Taşan içeriği gizle */
}

.product-family-members-list .member .closed_cabinet {
    display: block; /* Varsayılan olarak görünür */
    width: 100%; /* Kapsayıcının genişliğini doldur */
    height: auto; /* Oranını koruyarak yüksekliği ayarla */
	transition: opacity 0.3s ease-in-out; /* Yumuşak geçiş efekti */
}

.product-family-members-list .member .opened_cabinet {
    position: absolute; /* Opened cabinet, closed cabinet üzerine konumlandırılır */
    top: 0;
    left: 0;
    width: 100%; /* Kapsayıcının genişliğini doldur */
    height: 100%; /* Kapsayıcının yüksekliğini doldur */
    object-fit: cover; /* Resmi orantılı şekilde kapsayıcıya sığdır */
    opacity: 0; /* Varsayılan olarak gizli */
    z-index: 1; /* Üstte görünebilmesi için z-index ayarla */
    transition: opacity 0.3s ease-in-out; /* Yumuşak geçiş efekti */
}

.product-family-members-list .member:hover .opened_cabinet {
    opacity: 1; /* Hover sırasında görünür */
}

.product-family-members-list .member:hover .closed_cabinet {
    opacity: 0; /* Hover sırasında gizlenir */
}


/***********************custom checkbox *****************************/

.product-family-members-list label.custom-checkbox.disabled {
    opacity: 0.3;
}

.product-family-members-list .custom-checkbox {
   display: flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
}

.product-family-members-list .custom-checkbox input[type="checkbox"] {
   display: none;
   /* Varsayılan checkbox'ı gizleyin */
}

.product-family-members-list .custom-checkbox .custom-checkbox-box {
   height: 20px;
   width: 20px;
   background-color: transparent;
   border: 1px solid #000;
   position: relative;
   transition: background-color 0.3s, border-color 0.3s;
	margin-right: 5px;
}

.product-family-members-list .custom-checkbox input[type="checkbox"]:checked+.custom-checkbox-box {
   background-color: transparent;
   border-color: #007bff;
}

.product-family-members-list .custom-checkbox .custom-checkbox-box::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-45%, -65%) rotate(45deg);
   width: 5px;
   height: 10px;
   border: solid #007bff;
   border-width: 0 3px 3px 0;
   opacity: 0;
   transition: opacity 0.3s;
}

.product-family-members-list .custom-checkbox input[type="checkbox"]:checked+.custom-checkbox-box::after {
   opacity: 1;
}

.product-family-members-list .custom-checkbox:hover .custom-checkbox-box {
   border-color: #007bff;
}



@media only screen and (max-width: 1300px) {
    .product-family-members-list .container{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media only screen and (max-width: 900px) {
    .product-family-members-list .members {
		grid-template-columns: 1fr 1fr;
		gap:20px;
	}
}

@media only screen and (max-width: 520px) {
    .product-family-members-list .members {
		grid-template-columns: 1fr;
	}
	
	.product-family-members-list .container > .filters {
 		flex-direction: column;
	}
	
	.product-family-members-list .container > .filters > label {
		margin-left: 0;
		margin-top: 10px;
	}
}