/* ================================================
   HOCAM ONLINE - OZEL CSS DOSYASI
   ================================================ */

/* ================================================
   SLIDER BOYUTLARI (1906 x 938)
   ================================================ */

/* Ana slider container - sağdan soldan 25px boşluk */
.herobannerarea__machine__learning {
    position: relative;
    width: 100%;
    padding: 0 25px;
}

/* Slider slide yuksekligi - Desktop (1906 x 938) */
.herobannerarea__single__slider {
	width: 100%;
	height: auto;
	aspect-ratio: 1906 / 938;  /* Orijinal gorsel orani korunuyor */
	overflow: hidden;
}

.herobannerarea__machine__learning .herobannerarea__content__wraper {
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.banner-image-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.banner-image-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;  /* Gorsel tamamen gorunsun, kesilmesin */
	display: block;
	background-color: #f5f5f5;  /* Bosluk kalan alanlarda arka plan rengi */
}

/* Hover efekti */
.banner-image-link:hover img {
	opacity: 0.95;
	transition: opacity 0.3s ease;
}

/* ================================================
   RESPONSIVE SLIDER BOYUTLARI
   ================================================ */

/* Aspect ratio sayesinde tum ekranlarda otomatik olarak dogru oran korunuyor */
/* Sabit yukseklik artik gerekli degil, aspect-ratio: 1906 / 938 kullaniyor */

/* Eger mobilde farklı padding istersen: */
@media (max-width: 767px) {
	.herobannerarea__machine__learning {
		padding: 0 15px;  /* Mobilde biraz daha az padding */
	}
}

/* ================================================
   HEROBANNERAREA PADDING KALDIR
   ================================================ */

/* Ana padding degerlerini sifirla */
.herobannerarea.herobannerarea__2 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Tum responsive breakpoint'lerde de sifirla */
@media (min-width: 992px) and (max-width: 1365px) {
	.herobannerarea.herobannerarea__2 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.herobannerarea.herobannerarea__2 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

@media (max-width: 767px) {
	.herobannerarea.herobannerarea__2 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}


.gridarea__list2{
	margin-bottom: 15px;
}

.gridarea__list2 ul{
	display: block;
	margin: 0;
	padding: 0;
}

.gridarea__list2 ul li{
	font-size: 14px;
	color: var(--blackColor);
	display: block !important;
}


.gridarea__price span{
	color: var(--lightGrey4);
	font-size: 13px;
	margin-left: 0 !important;
}

/* ================================================
   SEPET BADGE KALDIR
   ================================================ */

/* Sepetteki "3" badge'ini kaldır */
.headerarea__right .header__cart > a::before {
	content: none !important;
	display: none !important;
}

/* Mobil menüdeki badge'i de kaldır */
.mob_menu_wrapper .headerarea__right .header__cart::before {
	content: none !important;
	display: none !important;
}

/* ================================================
   ANIMATE CONTENT H3 DUZENLEME
   ================================================ */

/* white-space: nowrap kaldır - h3'ler wrap olabilsin */
.animate__content__wrap .service__content h3 {
	white-space: normal !important;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	line-height: 1.3;
	padding: 5px 10px;
}

/* Tek satırda kalanlar da ortalı olsun */
.animate__content__wrap .single__service {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ================================================
   PAKET ÖZELLİKLERİ TOGGLE BUTONU
   ================================================ */

/* Gizli özellikler için class */
.package-features-list li.hidden-feature {
	display: none !important;
}

/* Tamamını Gör butonu stil */
.show-more-features-btn {
	background-color: transparent;
	color: var(--primaryColor, #5F2DED);
	border: 1px solid var(--primaryColor, #5F2DED);
	padding: 8px 20px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	display: inline-block;
	text-align: center;
}

.show-more-features-btn:hover {
	background-color: var(--primaryColor, #5F2DED);
	color: #fff;
}

.show-more-features-btn i {
	margin-left: 5px;
	transition: transform 0.3s ease;
}

/* Açık durumda ikon döndür */
.show-more-features-btn.expanded i {
	transform: rotate(180deg);
}

.course__details__wraper ul{
	width: 100% !important;
}