#helix-map-wrapper{
    position:relative;
    height:500px;
    margin-bottom:20px;
    }

#helix-map{
    width:100%;
    height:100%;
    border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
    z-index:0;}
.helix-box-contents {
    min-height: 10rem;
}
#helix-filter {
    position: absolute;
    top: 20px;
    left: 42%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 15px 0 15px;
    border-radius: 10px;
    display: flex;
    gap: 15px;
    row-gap: 15px;
    column-gap: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


#helix-filter select{
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:14px;
    }

#helix-list-container{
    margin-top:30px;
    }

#helix-subeler-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    }

.helix-box{
    background:#ffffff;
    border:1px solid #ddd;
    border-radius:10px;
    padding:15px;
    transition:box-shadow 0.3s ease;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
    }

.helix-box:hover{
    box-shadow:0 8px 16px rgba(0,0,0,0.15);
    transform:translateY(-4px);
    }

.helix-box h4{
    margin:10px;
    font-size:18px;
    color:#333;
    font-weight:600;
    }

.helix-box p{
    margin:0 10px 8px;
    color:#666;
    font-size:14px;
    }

.helix-box button{
    margin-top:0px;
    margin-right:5px;
    padding:6px 12px;
    font-size:13px;
    background:#0073aa;
    border:none;
    border-radius:6px;
    color:white;
    cursor:pointer;
    transition:background 0.2s ease;
    }

.helix-box button:hover{
    background:#005177;
    }

.helix-thumb{
    width:100%;
    height:auto;
    border-radius:8px;
    margin-bottom:10px;
    object-fit:cover;
    }

/* --- CUSTOM STYLES MERGED BELOW --- */ /* Ortalanmış ve daha büyük filtre paneli */ 
.helix-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin:20px auto;
    }

.helix-filter select{
    padding:6px 12px;
    font-size:15px;
    min-width:180px;
    border-radius:6px;
    border:1px solid #ccc;
    }
#helix-filter select {
    padding: 6px 30px 6px 10px;  /* Sağdan 30px boşluk */
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}


/* Harita altında 3’lü grid şube kutuları */ #helix-subeler-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
    margin:30px auto;
    }

/* Şube kutuları */ .helix-box{
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
    overflow:hidden;
    transition:all 0.2s ease-in-out;
    cursor:pointer;
    }

.helix-box img.helix-thumb{
    width:100%;
    aspect-ratio:4/3;
    object-fit:contain;
    background-color:#f9f9f9;
    }

/* Butonlar */ .helix-btns{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:10px;
    }

.helix-btns button{
    flex:1 1 auto;
    padding:5px 5px;
    font-size:10px;
    border:none;
    border-radius:6px;
    background:#0054a6;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:all 0.2s ease-in-out;
    color:white;
    width:100%;
    }

.helix-btns button:hover{
    background:#003e7e;
    transform:scale(1.03);
    }

/* Font Awesome ikonlar */ .helix-btns button i{
    font-size:14px;
    }

/* Hover animasyonlu kutular */ .helix-box{
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
    overflow:hidden;
    transition:transform 0.3s ease,box-shadow 0.3s ease;
    cursor:pointer;
    animation:fadeInUp 0.6s ease both;
    }

@keyframes fadeInUp{
    0%{
    opacity:0;
    transform:translateY(20px);
    }

100%{
    opacity:1;
    transform:translateY(0);
    }

}

/* Görsel animasyonu */ .helix-box img.helix-thumb{
    width:100%;
    aspect-ratio:4/3;
    object-fit:contain;
    background-color:#f9f9f9;
    animation:fadeIn 1s ease-in-out;
    }

@keyframes fadeIn{
    from{
    opacity:0;
    }

to{
    opacity:1;
    }

}

/* Butonlara geçiş efekti */ .helix-btns button{
    transition:all 0.2s ease-in-out;
    }

/* 1. Orijinal görseli göster,aspect ratio koru ama kırpma yapma */ .helix-box img.helix-thumb{
    width:100%;
    height:auto;
    max-height:280px;
    object-fit:contain;
    display:block;
    background:#f5f5f5;
    margin-bottom:10px;
    }

/* 2. Butonlar 2x2 grid ÅŸeklinde */ .helix-btns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:10px;
    }

/* 3. Filtre alanı ortalanıyor ve yazı alanları genişletiliyor */ .helix-filter{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
    }

/* Görsel düzeltme:4:3 oranlı kutu,kırpmadan içeride otursun */ .helix-box img.helix-thumb{
    width:100%;
    aspect-ratio:4 / 3;
    height:auto;
    object-fit:cover;
    display:block;
    background:#f5f5f5;
    margin-bottom:10px;
    border-radius:6px;
    }

/* Butonlar 2x2 grid ve daha küçük */ .helix-btns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:10px;
    }

/* Filtreleme alanı iyileştirme */ .helix-filter{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
    }

/* Başlık ve arama kutusunun yer aldığı container */
#helix-list-container > .helix-header {
    display: flex;
}


/* Başlık */
.helix-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: #0073aa;
    margin: 0;
}

/* Arama formu */
.helix-search-form {
    display: flex;
    align-items: center;
    border-radius: 0px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	width:27rem;
	margin-bottom:0px;
}

/* Input */
.helix-search-form input[type="text"] {
    border: unset;
    margin-bottom: 0px;
}

/* Button */
.helix-search-form button {
    background-color: #e87722;
    color: #fff;
    padding: 12px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 0;
}	

/* Flatsome ikon */
.helix-search-form button i {
    font-family: "fl-icons";
    font-style: normal;
    font-size: 18px;
    line-height: 1;
}