/* ==========================================================================
   Genel Responsive Ayarlar
   ========================================================================== */

/* Ekran Genişliği: 1200px ve üstü */
@media only screen and (min-width: 1200px) {
    .container,
    .container-fluid {
        padding: 0;
    }
}

/* Ekran Genişliği: 1199px ve altı */
@media (max-width: 1199px) {
    /* Genel menü ve buton ayarları */
    .navigation li a {
        padding: 7px 7px 28px;
    }
	/* Ekran boyutunu küçültürken "Hemen Ara" butonun bozulmasını engelliyor */
    .mainmenu-area .thm-btn {
        padding: 0 13px;
    }

	/* Project kısmı itemler için */
	.blog-latest-news .item-container {
		padding: 10px 0;
	}

}

/* ==========================================================================
   Tablet ve Mobil Menü Ayarları (992px ve altı)
   ========================================================================== */

/* Ekran Genişliği: 992px ve üstü */
@media only screen and (min-width: 992px) {
    /* Mobil menü ve responsive logoları gizle */
    .logo-responsive,
    .mobile-menu {
        display: none;
    }
}

/* Ekran Genişliği: 992px ve altı */
@media (max-width: 992px) {
    /* Genel yerleşim ve menü ayarları */
    .right-area {
        position: absolute;
        right: 15px;
        top: -14px;
    }
    .mainmenu-area .right-area {
        margin-right: 3%;
    }
    .main-logo img {
        height: 47px;
        width: auto;
    }   
    .main-logo {
        margin: 10px 0 10px;
        text-align: center;
    }
    .call-to-action {
        text-align: center;
    }
    .call-to-action a.thm-btn {
        float: none !important;  
        margin-top: 20px;
    }

    /* Mobil görünümde masaüstü menü ve logoyu gizle */
    .logo-pc,
    .navigation {
        display: none !important;
    }
    .mainmenu-area .container {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .mainmenu-area .navbar-header {
        margin-top: -30px;
    }

    /* Mobil menü genel ayarları */
    .mainmenu-area .menu-column {
        float: left;
        width: 100%;
    }
    .main-menu .collapse {
        border: 0px;
        max-height: 300px;
        display: none !important;
        overflow: auto !important;
    }
    .main-menu .collapse.in, 
    .main-menu .collapsing {
        display: block !important;
    }
    .main-menu .navbar-header {
        padding: 14px 0px;
        float: none;
        background: rgb(0, 37, 74);
    }  
    .main-menu .navbar-toggle {
        float: none;
        margin: 0;
        display: block;
        padding-left: 3%;
    }  
    .main-menu .navbar-toggle .icon-bar {
        background: #fdc716;
        width: 30px;
    }
}

/* ==========================================================================
   Telefon ve Küçük Ekran Ayarları
   ========================================================================== */

/* Ekran Genişliği: 768px ve altı */
@media (max-width: 768px) {
    /* Header ve top bar ayarları */
    .header-top .top-left ul {
        text-align: left;
    }

    .header-top .top-left ul li:last-child { 
		display: none;
	}
    
    /* Sayfa içi ayarlar */
    .about-us .about-info {
        margin-bottom: 50px;
    }
	/* About sayfasındaki ikinci about kısmının başlığı resme çok yapışık olduğu için */
	.about-2 .video-image-box {
		margin-bottom: 30px;
	}
    .page-title .path {
        text-align: center;
    }
    
    /* Footer ayarları */
    .footer-bottom {
        padding-bottom: 70px;
    }
    .footer-bottom .pull-left,
    .footer-bottom .pull-right {
        text-align: center;
        width: 100%;
    }
    .footer-bottom .pull-right {
        margin-top: 5px;
    }
}

/* Ekran Genişliği: 640px ve altı */
@media (max-width: 768px) {
    .page-title {
        margin-top: 0px !important;    
        text-align: center;
    }
}

/* Ekran Genişliği: 359px ve altı */
@media (max-width: 359px) {
    /* Özellikler bölümü (feature section) için ayarlar */
    .feature .item-list .item .content-box p {
        display: none;
    }
    .feature .item-list .item .content-box h3 {
        margin-top: 10px;
        text-align: center;
    }
}
/* Slider ayarlamaları */
@media (max-width: 992px) {
	.swiper,
	.swiper-slide,
	.swiper-slide img {
		height: 80vh;
	}
	.slide-content {
		top: 25%;
		left: 50%;
		transform: translateX(-50%);
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.slide-content h1 {
		font-size: 38px;
	}
	.slide-content h2 {
		font-size: 34px;
	}
	.slide-content h1 span {
		font-size: 42px;
	}
	.slide-content button,
	.slide-content .thm-btn {
		font-size: 14px;
		line-height: 36px;
		padding: 0 1em;
	}
	.slide-content,
	#slide-2 .slide-content h1 {
		white-space: normal;
	}
}

@media (max-width: 768px) {
	.slide-content {
		width: 95vw;
		padding: 0 1vw;
		gap: 14px;
	}
	.slide-content h1 span {
		font-size: clamp(22px, 8vw, 30px);
	}
	.slide-content h1 {
		font-size: clamp(18px, 8vw, 26px);
	}
	.slide-content h2 {
		font-size: clamp(14px, 6vw, 22px);
	}
	.slide-content button,
	.slide-content .thm-btn {
		font-size: 14px;
		line-height: 36px;
		padding: 0 1em;
	}
}

/* Mobil ve tablet görünümde hover efektlerini kaldır */
@media (max-width: 992px) {
	.service .item:hover:before {
		opacity: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
	
    .service .item:hover .default-overlay-outer {
		top: -100% !important;
        opacity: 0 !important;
    }
	
    .service .item:before {
		display: none !important;
    }
	
    .service .default-overlay-outer {
		display: none !important;
    }
}

/* Preferences kutucukları mobilde PC görünümünün yarısına düşsün ve ortalansın */
@media (max-width: 992px) {
	.preference-item {
		width: 50% !important;
	}
}

@media (max-width: 768px) {
	.shop .preference-item .content-layer a {
		line-height: 1.5;
		padding: 5px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.shop .preference-item .content-layer a {
		font-size: 10px;
	}
}

/* Servis kartlarının boyutları ayarlanıyor */
@media (max-width: 992px) and (min-width: 600px) {
	.service-item {
		width: 33% !important;
	}
	.service-item .content h4 {
		font-size: 16px;
		padding: 5px 0px;

	}
	.service-item .content .text p {
		font-size: 14px;
	}
}

@media (max-width: 600px) and (min-width: 400px) {
	.service-item {
		width: 50% !important;
		padding: 0px 8px;
	}
	.service-item .content h4 {
		font-size: 15px;
		padding: 5px 0px;
	}
}

@media (max-width: 400px) {
	.service-item {
		width: 85% !important;
		margin: 0 auto !important;
		float: none !important;
		display: block !important;
	}
	.service-item .content h4 {
		font-size: 15px;
		padding: 5px 0px;
	}
}

@media (max-width: 992px) {
	.service-item .content h4 {
  		min-height: 50px;
	}
	.service-item .content .text p {
  		min-height: 100px;
	}
}