/* Bu CSS, mobil cihazlarda "hover" yerine "tap" olayini dinler */
@media screen and (max-width:1024px) and (min-width:120px) {
#top{
overflow:hidden;
border-bottom:1px solid #eee;
background: linear-gradient(40deg, #ffffff, #f9f9f9, #ffffff);
}

.top{
overflow:hidden;
width:100%;
margin:0 auto;
}

.top-sosyal{
float:none;
overflow:hidden;
color:#666;
margin-top:5px;
border-bottom:1px solid #eee;
}

.top-sosyal i{
float:left;
display:block;
border-left:1px solid #eee;
font-size:14px;
padding-top:3px;
font-style:normal;
padding:10px 15px 5px 15px;
}

.top-sosyal i em{
font-size:13px;
font-style:normal;
font-weight:600;
display:block;
color:#2E3289;
}

.top-iletisim{
float:none;
padding:15px 10px 10px 10px;
overflow:hidden;
}

.top-iletisim span{
display:block;
float:left;
}

.top-iletisim span:nth-child(2){
float:right;
margin-right:10px;
}

.top-iletisim i{
float:left;
display:block;
padding:0px 10px 0 0;
font-size:26px;
}

.top-iletisim b{
display:block;
float:left;
}

.top-iletisim em{
font-style:normal;
color:#2E3289;
display:block;
font-size:12px;
font-family: Microsoft Sans Serif !important;
font-weight:600;
padding:2px 0 0 0
}

#header{
box-shadow: 0 2px 5px rgba(0,0,0,.08);
background: linear-gradient(40deg, #fcfcfc, #fff, #fcfcfc);
}

.header{
width:100%;
margin:0 auto;
overflow:hidden;
}

.logo{
float:none;
text-align:center;
padding:15px 0 15px 0
}

.logo img{
width:230px;
}

.menu{
float:none;
display:none;
}

.menu ul{
margin:0 auto;
list-style:none;
padding:0;
}

.menu li{
float:none;
font-weight:600;
padding:20px 10px 10px 10px;
}

.menu li a{
color:#333
}

.menu li a:hover{
color:#2E3289;
}

.menu ul ul{
display:none;
}

.menu ul li:hover ul{
display:block;
position:absolute;
z-index:9;
background:#fcfcfc;
overflow:hidden;
min-width:220px;
padding:31px 0 0 0;
box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

.menu li li:nth-child(1){
border-top:2px solid #2E3289;
}

.menu li li{
float:none;
font-size:13px;
padding:0;
}

.menu li li a{
display:block;
padding:10px;
}

.menu li li a:hover{
background:#eee;
padding-left:15px;
color:#2E3289;
}

#slider{
width:100%;
}


.carousel {
overflow:hidden;
}

.carousel-cell {
width: 100vw;
background-size: cover;
background-position: center;
margin-right: 0;
}

.carousel-cell img{
width:100%;
height:500px;
object-fit:cover;
}

.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
background: #2E3289;
border-radius: 50%;
opacity: .25;
cursor: pointer;
}

.flickity-page-dots {
position: absolute;
width: 100%;
bottom: 25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}

.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}

.fixed .menu ul ul {
padding:15px 0 0 0px!important;
}

#content{
min-height:600px;
}

.fixed .logo{
padding:10px 0 5px 0
}

.fixed .logo img{
width:150px
}

.fixed .menu li{
padding:15px 20px
}

.fixed .menu li li{
padding:0
}

.content{
width:100%;
margin:0 auto;
overflow:hidden;
}

#footer{
overflow:hidden;
background:#fcfcfc;
padding:20px 0 20px 0;
box-shadow: 1px 5px 15px rgba(0,0,0,.20);
}

.footer{
margin:0 auto;
width:100%;
margin:0 auto;
min-height:100px;
}

.box-footer{
width:98%;
float:none;
margin:0 auto;
overflow:hidden;
}

.box-footer-2{
margin:0 auto;
overflow:hidden;
width:96%;
float:none;
}

.footer-slogan{
margin:0 auto;
overflow:hidden;
border-bottom:1px solid #ddd;
font-size:18px;
padding:0 40px 10px 40px;
font-weight:600;
color:#4d4d4d;
margin-bottom:20px;
text-align:center;
}

.box-footer ul{
overflow:hidden;
width:50%;
float:left;
margin:0 auto;
padding:0;
margin-bottom:20px;
}

.box-footer li{
padding:10px 0;
font-weight:400;
color:#4d4d4d;
}

#copy{
background: linear-gradient(40deg, #495057, #495057);
min-height:30px;
text-align:center;
color:#fff;
font-size:15px;
font-weight:5ppx;
padding:20px 0
}

#copy span{
display:block;
padding:10px 0 0 0;
font-size:12px;
}

.footer-adres{
overflow:hidden;
padding:10px 0 0 0;
color:#4d4d4d
}

.footer-adres i{
display:block;
float:left;
width:30px;
height:50px;
padding:15px 0 0 0;
font-size:24px;
color:#2e3186;

}

.footer-adres span{
display:block;
padding:5px 0 10px 0;
border-bottom:1px solid #eee;
font-weight:500;
display:block;
font-size:13px;
}

.abone-ol{
float:right;
width:98%;
margin:0 auto;
padding:15px 0px 0 0;
overflow:hidden;
}

.abone-ol span{
display:block;
color:#444;
}

.bottom-sosyal{
overflow:hidden;
margin:0 auto;
width:96%
}

.bottom-sosyal i{
display:block;
float:left;
width:40px;
height:40px;
border:1px solid #ccc;
border-radius:50%;
line-height:44px;
text-align:center;
margin-right:10px;
margin-top:20px;
color:#555;
}

.aboneform{
overflow:hidden;
padding:20px 0 0 0px;
}

.aboneform input{
width:200px;
height:40px;
border:1px solid #ccc;
font-family: "Poppins", sans-serif;
padding:0 5px;
border-radius:5px;
}

.aboneform button{
font-family: "Poppins", sans-serif;
background:#2e3186;
color:#fff;
border:1px solid #2e3186;
height:40px;
padding:0 20px;
border-radius:5px;
}

.efektle {
float: left;
position: relative;
cursor:pointer;
}

.efektle span{
display: block;
width: 0;
overflow: hidden;
white-space: nowrap;
color: white;
transition: width 0.3s ease-in-out;
}

.efektle:hover span {
overflow:hidden;
width:80px;
padding:8px 0;
font-weight:600
}

.facebookbg:hover{
background-color: #3498db!important;
color:#fff!important
}

.twitterbg:hover{
background-color: #000!important;
color:#fff!important
}

.instagrambg:hover{
background-color: #8a3ab9!important;
color:#fff!important
}

.youtubebg:hover{
background-color: #c4302b!important;
color:#fff!important
}

.linkedinbg:hover{
background-color: #0e76a8!important;
color:#fff!important
}

/*Anasayfa*/

.title {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
color: #444;
text-align: center;
position: relative;
margin: 30px 0;
}

#home-urunler{
overflow:hidden;
}

.home-urunler{
width:96%;
margin:0 auto;
padding:0 0 50px 0;
}


.title::before{
content: "";
flex: 1;
height: 1px;
background-color: #e5e5e5;
margin: 0 10px 0 0;
}

.title::after {
content: "";
flex: 1;
height: 1px;
background-color: #c5c5c5;
margin: 0 0px 0 10px;
}

.urunler {
display: flex;
flex-wrap: wrap;
gap:2%; /* Ürünler arasindaki bosluk */
}

.urun {
width:48%;
padding: 15px;
margin-bottom:2%;
background-color: #fcfcfc;
border: 1px solid #ddd;
box-sizing: border-box;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
border-radius:5px;
}

.urun img {
width: 100%;
height: auto;
transition: transform 0.3s ease;
border-radius:5px;
}

.urun h3 {
font-size: 16px;
margin: 20px 0 10px 0;
font-weight:500
}

.urun p {
font-size: 14px;
color: #666;
}

.urun:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.urun:hover img {
transform: scale(1.1);
}

.urun::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(256, 256, 256, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
}

.urun:hover::before {
opacity: 1;
}


#urunler-katalog{
overflow:hidden;
background:url(../images/ups.jpg);
background-position:top center;
color:#fff;
margin-bottom:50px;
}

.urunler-katalog{
width:100%;
margin:0 auto;
overflow:hidden;
min-height:150px;
}

.cozumler{
min-height:300px;
width:100%;
margin:0 auto;
overflow:hidden;
}

.banneralt{
overflow:hidden;
background:url(../images/banner.jpg);
height:150px;
}

#bilgi-bolumu {
overflow:hidden;
width:96%;
margin:0 auto;
padding:30px 0 30px 0
}

.sol-video {
float:none;
width:100%;
}

.sag-hakkimizda {
float:none;
width:96%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding:20px;
margin-right:0%;
margin:0 auto;
margin-top:20px;
}

.sag-hakkimizda h2 {
font-size: 28px;
color: #333;
margin-bottom:5px;
margin:0 auto;
padding:0;
letter-spacing:5px

}

.sag-hakkimizda h2 span{
display:block;
font-weight:200;
font-size:17px;
letter-spacing:1px;
color:#444;
}

.sag-hakkimizda p {
font-size: 16px;

color: #666;
line-height: 1.6;
}

.onceliklerimiz{
width:96%;
margin:0 auto;
padding:0 0 20px 0;
}

.onceliklerimiz p{
overflow:hidden;
font-size:16px;
text-align:center;
color:#666;
}


.neden-biz{
overflow:hidden;
padding:20px 0;
width:96%;
margin:0 auto;
}

.neden-biz-sol{
overflow:hidden;
width:100%;
overflow:hidden;
float:none;
}

.neden-biz-sol span{
background:#2e3186;
color:#fff;
padding:5px 10px;
border-radius:20px;
display:block;
width:0;
font-weight: 500;
font-size: 18px;
text-align:center;
margin-bottom:10px;
display:none;
}

.neden-biz-title{
font-weight: 700;
text-transform: capitalize;
font-size: 24px;
line-height:28px;
color:#4d4d4d
}

.neden-biz-title em{
font-style:normal;
color:#2e3186;
}

.neden-biz-sol p{
color:#757F95;
font-size:14px;
line-height:25px;
}

.choose-content-wrap{
padding:0px 0 0 0;
}

.choose-item {
margin:20px 0 0 5px;
}

.choose-item-icon {
position: relative;
width: 60px;
height: 60px;
line-height: 58px;
background: #2e3186;
text-align: center;
border-radius: 50px 50px 50px 10px;
float:left;
margin-right:20px;
}

.choose-item-info {
flex: 1;
}

.choose-item-info h4 {
color: #333;
font-size: 16px;
font-weight: 600;
padding:0;
margin:0 auto
}

.choose-item-icon::before {
content: "";
position: absolute;
inset: -5px;
border: 2px solid #2e3186;
border-radius: 50px 50px 50px 10px;
}

.choose-item-icon img {
width: 38px;
filter: brightness(0) invert(1);
}

img, svg {
vertical-align: middle;
}

.choose-item-info b{
font-weight:normal;
color:#757F95;
font-size:13px;
line-height:inherit;
}

.neden-biz-sag{
float:right;
width:500px;
display:none;
}

.neden-biz-sag img{
width:100%;
}

.kutular-container {
display: flex;
justify-content: space-between;
gap: 0px; /* Kutu arasindaki bosluk */
flex-wrap: wrap; /* Ekran daraldiginda kutular alt satira geçsin */
width:100%;
margin:0 auto;
text-align:center;
margin-bottom:30px;
}

.kutu {
background-color: #1abc9c; /* Kutu arka plan rengi */
padding: 20px;
width: 96%; /* Kutularin genisligi */
margin:0 auto;
margin-bottom:20px;
border-radius:10px;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover efekti */
color:#fff;
overflow:hidden;
padding-bottom:50px;
}

.kutu:hover {
transform: translateY(-5px); /* Hoverda kutuyu biraz yukari kaydir */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Hoverda daha belirgin gölge */
}

.kutu h3 {
font-size: 24px;
color: #fff;
margin-bottom: 15px;
font-weight: 600;
}

.kutu p {
font-size: 16px;
color: #eee;
line-height: 1.5;
margin-bottom:15px;
min-height:130px;
}

.devam-link {
color: #fff; /* Link rengi */
text-decoration: none;
font-weight: bold;
border:2px solid #fff;
padding:10px;
margin-top:10px;
}

.devam-link:hover {
text-decoration: none;
color:#000;
background:#fff;
border:1px solid #fff;
}

.haberler{
width:100%;
margin:0 auto;
overflow:hidden;
padding:0 0 50px 0
}

.carouselcell{
width:60%;
margin-right:10px;
background:#f8f8f8;
padding:5px 
}

.carouselcell img{
width:100%;
}

.haberler .flickity-page-dots .dot {
display:none!important
}

.carouselcell span{
padding:10px 0;
display:block;
font-weight:500;
}

.butonlari{
overflow:hidden;
padding:10px 5px;
font-size:12px;
}

.butonlari em{
display:block;
float:left;
width:50%;
font-style:normal;
}

.butonlari b{
float:right;
width:50%;
border:1px solid #2e3186;
text-align:center;
font-weight:normal;
background:#2e3186;
color:#fff;
}
}