@import url('../slick/slick-theme.css');
@import url('../slick/slick.css');

body { font-family: "Rubik", sans-serif;}

.header-logo { background-color: #13233c;}
.header-logo .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; height: 50px}
.header-logo .btn { border-top-left-radius: 0; border-bottom-left-radius: 0;}
.header-contact a:hover { color: #df232f!important}

.navbar > .container { background: #fff; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px;}
.navbar-nav > .nav-item .nav-link { font-size: 17px; color: #5a5553; padding-right: 1.5rem; padding-left: 1.5rem;}
.navbar-nav > .nav-item .nav-link.active,
.navbar-nav > .nav-item .nav-link:hover { position: relative;}
.navbar-nav > .nav-item .nav-link.active:after,
.navbar-nav > .nav-item .nav-link:hover:after { position: absolute; content: ""; bottom: -5px; left: 0; right: 0; height: 15px; width: 2px; text-align: center; margin: 0 auto; background: #df232f;}
.navbar-toggler-icon { background: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e") !important;}

.dropdown-item.active,
.dropdown-item:active { background: #013d66; color: #fff}
.dropdown-submenu { position: relative;}
.dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0 6px 6px 6px; }
.dropdown-submenu:hover>.dropdown-menu { display: block;}
.dropdown-submenu>a:after { display: block; content: ''; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #444; margin-top: 7px; margin-right: -10px; }
.dropdown-submenu.pull-left { float: none; }
.dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; border-radius: 6px 0 6px 6px; }
.dropdown-toggle::after { color: #aaa;}

#carouselBanner .carousel-item.background { height: 65vh; min-height: 300px; background: no-repeat center center scroll; background-size: cover; }
#carouselBanner .carousel-item.background.background-sub { height: 45vh; }
#carouselBanner .carousel-indicators > li { background-color: rgba(0,0,0,.5); }
#carouselBanner .carousel-indicators > li.active{background-color: #000;}
#carouselBanner .carousel-caption { background: #13233c; right: auto; bottom: 0; text-align: left; padding: 20px; text-transform: uppercase; max-width: 320px; font-size: 40px; font-weight: 600;}

.category-section .card-img-overlay { top: auto; bottom: -5px;}
.category-section .card-img-overlay h2 { font-size: 20px}
.category-section .card { min-height: 220px;}

.product-block { color: #13233c;}
.product-block .card-text { display: block; min-height: 70px;}
.product-block:hover img { border: 0!important}
.price-old { font-size: 15px; font-weight:400; text-decoration: line-through;}
.price-new { font-size: 25px; font-weight: bold; color: #13233c;}
.price-cut { background: #df232f; width: 70px; height: 70px; line-height: 70px; top: 20px; bottom: auto; right: 10px; font-size: 25px; font-weight: bold;}
.product-block .btn { background: #13233c; font-size: 18px; height: 50px; line-height: 40px;}
.product-table { background: transparent!important}
.table>:not(caption)>*>* { background: transparent!important; padding: 1rem .5rem; color: #797979}

#slick-product .card { background: transparent}
#slick-product .card-title { color: #fff}
#slick-product span.card-text { color: #6282b3}
#slick-product .price-new, #slick-product .price-old { color: #fff}
#slick-product .form-check-label { color: #fff}
#slick-product .btn { background: #df232f}

#slick-category .slick-slide,
#slick-cok-satan .slick-slide,
#slick-product .slick-slide { padding: 0 10px;}

.campaign-bg .carousel-item { padding: 80px 0}
#carouselProductGallery .carousel-indicators { position: relative; bottom: 0; margin: 10px 5px; }
#carouselProductGallery .carousel-indicators > button { width: inherit; height: inherit; text-indent: initial; opacity: .7; background: transparent }
#carouselProductGallery .carousel-indicators > button.active { opacity: 1; }
#carouselProductGallery .carousel-inner .carousel-item { height: auto; min-height: auto;}

.coupon-wrapper .form-control,
.coupon-wrapper button { background: #e1e1e1}

.sosyal_medya{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:row;margin-bottom:0;list-style:none;}
.sosyal_medya li{padding-left: 10px; padding-right: 10px;}
.sosyal_medya a {color: #000; display: inline-block; text-align: center}

#productSideBar { background: #efeff0}
#productSideBar .form-check .form-check-input { float: right; width: 1.25em; height: 1.25em; --bs-form-check-bg: #cfcfcf }

#return-to-top { position: fixed; bottom: 20px; right: 20px; background:#007bff; width: 40px; height: 40px; text-decoration: none; display: none; border-radius: 10px; z-index : 999; }
#return-to-top i { font-size: 25px; color: #fff; position: relative; margin: 0; left: 9px; top: 7px; }

a#karsilastir-btn { position: fixed; right: -60px; top: 200px; z-index: 100;}
a#karsilastir-btn > span { transform: rotate(-90deg);}

.breadcrumb-item a{ color: #797979;}

.page-titles { font-size: 25px; font-weight: 500; text-transform: uppercase; color: #222222}

.form-control { height: 50px}
#quantity { background: #dcdcdc;}

table { width: 100%!important; border: 0;}
table tr td:nth-child(1) { font-weight: bold;}
table>:not(caption)>*>* { background: transparent !important; padding: 1rem 0; color: #797979; border-bottom: 1px solid #dee2e6;}

#nopage {background-color: #fff; min-height: 80vh;}
.text-wrapper { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.title {font-size: 6em; font-weight: 700; color: #13233c;}
.subtitle { font-size: 40px; font-weight: 700; color: #dc3545;}
.buttons { margin: 30px;}
.buttons a.button { font-weight: 700; border: 2px solid #13233c; text-decoration: none; padding: 15px; text-transform: uppercase; color: #13233c; border-radius: 26px; transition: all 0.2s ease-in-out; }
.buttons a.button:hover { background-color: #13233c; color: white; transition: all 0.2s ease-in-out;}

footer .sosyal_medya a {color: #fff; width: 35px; height: 35px; display: inline-block; border-radius: 50%; text-align: center; font-size: 15px; padding-top: 6px}
footer .sosyal_medya .facebook{background:#3b5998;}
footer .sosyal_medya .twitter{background:#41c2e0;}
footer .sosyal_medya .instagram{background:#A343AF;}
footer .sosyal_medya .youtube{background:#e20505;}
footer { font-size: 13px; color: #fff}

.bg-gray { background: #f7f7f7}
.bg-dark-blue { background: #13233c}
.text-secondary { color: #6282b3!important }
.text-gray { color: #797979}
.btn.bg-dark-blue:hover { background: #df232f;}

/* RESPONSIVE UP (min-width) */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  	.dropdown-submenu>.dropdown-menu { margin-top: 5px; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* RESPONSIVE DOWN (max-width) */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	.icerik img { width: 100% !important; height: auto !important; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	.navbar-toggler { position: absolute; right: 0; top: -55px;}
	.navbar-toggler-icon { background: url(data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e) !important; }
	.navbar { padding-top: 0!important; padding-bottom: 0!important;}
	.navbar-nav > .nav-item .nav-link { padding-left: 0;}
	.navbar-nav > .nav-item .nav-link.active:after,
	.navbar-nav > .nav-item .nav-link:hover:after { right: auto; bottom: 0;}
	.header-logo .dropdown { display: inline-block;}
	.product-block h2, .product-block h4 { font-size: 13px!important;}
	.product-block span.card-text{ font-size: 12px;}
	.product-block .card-footer { padding-left: 0; padding-right: 0;}
	.product-block .form-check-label { font-size: 13px;}
	.product-block .btn { font-size: 16px; height: 40px; line-height: 30px;}
	.price-old { font-size: 12px}
	.price-new { font-size: 15px;}
	.campaign-bg .carousel-item { padding: 80px 20px;}
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
	.breadcrumb { display: none;}
	.input-group.w-25 { width: 100%!important}
}

/* ---------------------------------------------------------------------------
   Yedek parça <-> makine ilişkisi bölümleri
   (yedek parça detayında "Uyumlu Olduğu Ürünler", makine detayında "Yedek Parçaları")
   --------------------------------------------------------------------------- */

.uyumlu-kart {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-left: 4px solid #13233c;
	border-radius: 6px;
	padding: 14px 16px;
	text-decoration: none;
	color: #13233c;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.uyumlu-kart:hover {
	border-color: #df232f;
	border-left-color: #df232f;
	box-shadow: 0 4px 16px rgba(19, 35, 60, .14);
	transform: translateY(-2px);
	color: #df232f;
}

.uyumlu-gorsel {
	flex: 0 0 92px;
	width: 92px;
	height: 92px;
	margin-right: 16px;
	border-radius: 4px;
	background: #f7f8fa;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.uyumlu-gorsel img { max-width: 100%; max-height: 100%; object-fit: contain;}

.uyumlu-metin { display: flex; flex-direction: column; min-width: 0; gap: 3px;}

.uyumlu-baslik {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uyumlu-alt {
	font-size: 14px;
	color: #7b8493;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uyumlu-git { font-size: 13px; font-weight: 600; color: #df232f; margin-top: 4px;}
.uyumlu-kart:hover .uyumlu-git { text-decoration: underline;}

.parca-tablo table { border: 1px solid #e6e6e6;}
.parca-tablo thead th {
	/* Bootstrap 5, hucre arka planini inset box-shadow ile bastigi icin
	   degiskenleri de birlikte ezmek gerekiyor. */
	--bs-table-bg: #13233c;
	--bs-table-accent-bg: transparent;
	--bs-table-color: #fff;
	background-color: #13233c !important;
	color: #fff !important;
	box-shadow: none !important;
	font-weight: 500;
	font-size: 13px;
	text-transform: uppercase;
	border-color: #13233c;
}

/* Aktarimin urettigi bilgi tablosunun basligi tablonun ustunde dursun */
.bosch-bilgi-tablosu { caption-side: top;}
.bosch-bilgi-tablosu > caption.bosch-tablo-baslik {
	caption-side: top;
	padding: 0 0 8px;
	color: #13233c;
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.bosch-bilgi-tablosu th { background: #fafbfc; font-weight: 600; color: #13233c;}
.parca-tablo tbody td { font-size: 14px;}
.parca-tablo tbody a { color: #13233c;}
.parca-tablo tbody a:hover { color: #df232f;}
.parca-tablo img { width: 60px; height: 60px; object-fit: contain; background: #fff;}

.pagination .page-link { color: #13233c;}
.pagination .page-link:hover { color: #df232f;}

/* Aktif sayfa: koyu zemin uzerinde beyaz rakam.
   Renk belirtilmezse .page-link'ten gelen koyu renk devralinip
   secili sayfa numarasi okunmaz hale geliyordu. */
.pagination .page-item.active .page-link,
.pagination .page-item.active > .page-link:hover,
.pagination .page-item.active > .page-link:focus {
	background: #13233c;
	border-color: #13233c;
	color: #fff;
}

@media (max-width: 767.98px) {
	.parca-tablo tbody td { font-size: 13px;}
	.parca-tablo .btn { font-size: 12px; padding: 3px 8px;}
	.uyumlu-baslik { font-size: 15px;}
	.uyumlu-gorsel { flex: 0 0 70px; width: 70px; height: 70px; margin-right: 12px;}
}

/* Kategori sayfasinda urunlerin ustunde gosterilen alt kategori kutulari */
.alt-kategori-kart {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	padding: 12px 8px;
	color: #13233c;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.alt-kategori-kart:hover {
	border-color: #df232f;
	box-shadow: 0 2px 10px rgba(19, 35, 60, .12);
	color: #df232f;
}
.alt-kategori-baslik { display: block; font-weight: 600; font-size: 14px;}
.alt-kategori-serisi img { max-height: 110px; object-fit: contain;}

/* Mobilde yedek parca tablosu: bos gorsel sutunu yer kaplamasin,
   satir icerigi rahat nefes alsin. */
@media (max-width: 575.98px) {
	.parca-tablo thead th:first-child,
	.parca-tablo tbody td:first-child { display: none;}
	.parca-tablo thead th { font-size: 11px; padding: .5rem .35rem;}
	.parca-tablo tbody td { padding: .6rem .35rem;}
	.parca-tablo .btn { font-size: 11px; padding: 3px 7px;}

	/* Uyumlu urun kartlari telefonda tam genislik */
	.uyumlu-kart { padding: 12px;}
	.uyumlu-git { font-size: 12px;}
}

/* ---------------------------------------------------------------------------
   Banner kontrolleri (gostergeler + oklar)
   Sag altta tek kumede toplanir; banner'in sol tarafindaki basliklarin
   uzerine binmez. Buzlu beyaz kapsul sayesinde hem acik hem koyu
   banner zemininde okunur kalir.
   --------------------------------------------------------------------------- */
#carouselBanner .banner-kontrol {
	position: absolute;
	left: 0; right: 0;
	bottom: 20px;
	z-index: 6;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

#carouselBanner .banner-kontrol .carousel-indicators {
	position: static;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	pointer-events: auto;
}

/* Nötr gri + hafif gölge: hem açık (A, B) hem koyu (C) banner zemininde okunur */
#carouselBanner .banner-kontrol .carousel-indicators button {
	width: 34px; height: 4px;
	margin: 0; padding: 0;
	border: 0; border-radius: 99px;
	background: rgba(125,136,152,.8);
	box-shadow: 0 1px 3px rgba(0,0,0,.22);
	opacity: 1;
	text-indent: 0;
	transition: width .25s ease, background .25s ease;
}
#carouselBanner .banner-kontrol .carousel-indicators button:hover {
	background: rgba(19,35,60,.75);
}
#carouselBanner .banner-kontrol .carousel-indicators button.active {
	background: #df232f;
	width: 54px;
}
#carouselBanner .banner-kontrol .carousel-indicators button:focus-visible {
	outline: 2px solid #df232f;
	outline-offset: 3px;
}

@media (max-width: 767.98px) {
	#carouselBanner .banner-kontrol { bottom: 10px;}
	#carouselBanner .banner-kontrol .carousel-indicators { gap: 6px;}
	#carouselBanner .banner-kontrol .carousel-indicators button { width: 20px; height: 3px;}
	#carouselBanner .banner-kontrol .carousel-indicators button.active { width: 32px;}
}
}