@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;}
}
}

/* ---------------------------------------------------------------------------
   ARAMA SONUÇLARI - ANA KATEGORİ GRUPLARI
   45.000+ ürünlük katalogda arama sonucu çok geniş olabiliyor. Sonuçlar ana
   kategoriye göre gruplanır; kullanıcı tek dokunuşla daraltır.
   Mobilde yatay kaydırılabilir şerit, masaüstünde sarmalanan rozet dizisi.
--------------------------------------------------------------------------- */
.arama-gruplari {
	background: #f6f8fa;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	padding: 14px 16px;
}
.arama-gruplari-baslik {
	font-size: 13px;
	font-weight: 600;
	color: #5a6673;
	margin-bottom: 10px;
}
.arama-gruplari-baslik i { color: #df232f; margin-right: 4px;}

.arama-grup-seridi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.arama-grup {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid #d7dee6;
	border-radius: 999px;
	background: #fff;
	color: #13233c;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.arama-grup:hover {
	border-color: #13233c;
	color: #13233c;
	background: #eef2f7;
}
.arama-grup-adet {
	display: inline-block;
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #e7ecf2;
	color: #5a6673;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}
.arama-grup.aktif {
	background: #13233c;
	border-color: #13233c;
	color: #fff;
}
.arama-grup.aktif .arama-grup-adet {
	background: #df232f;
	color: #fff;
}

.arama-grup-secili {
	margin-top: 10px;
	font-size: 13px;
	color: #5a6673;
}
.arama-grup-secili a {
	color: #df232f;
	margin-left: 6px;
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	.arama-gruplari { padding: 12px;}

	/* Telefonda sarmalamak yerine tek satırda yatay kaydırma:
	   çok sayıda grup listenin üstünü kaplamasın. */
	.arama-grup-seridi {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.arama-grup { flex: 0 0 auto; font-size: 13px; padding: 7px 12px;}
}

/* ---------------------------------------------------------------------------
   YEDEK PARÇA DETAYI - "Birlikte Gerekebilecek Parçalar" tablosu
--------------------------------------------------------------------------- */
.kardes-tablo table { min-width: 760px;}

.kardes-sepet-hucre {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}
.kardes-adet-grup { width: 108px; flex: 0 0 108px;}
.kardes-adet-grup .kardes-adet {
	padding-left: 2px;
	padding-right: 2px;
	-moz-appearance: textfield;
}
/* Sayı kutusundaki tarayıcı okları dar hücrede taşıyordu */
.kardes-adet-grup .kardes-adet::-webkit-outer-spin-button,
.kardes-adet-grup .kardes-adet::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.kardes-adet-grup .btn { padding: .15rem .5rem; font-weight: 600;}

.kardes-sepete-ekle { white-space: nowrap;}

.kardes-alt-bar {
	background: #f6f8fa;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	padding: 12px 14px;
	gap: 10px;
}
.kardes-durum:empty { display: none;}

@media (max-width: 575.98px) {
	.kardes-alt-bar { flex-direction: column; align-items: stretch !important;}
	.kardes-alt-bar .d-flex { justify-content: stretch;}
	.kardes-alt-bar .btn { flex: 1 1 auto;}
}

/* ---------------------------------------------------------------------------
   PATLAK RESİM (teknik çizim) - tıklanabilir parça noktaları
   Koordinatlar çizimin özgün ölçüsüne göre yüzdeye çevrildiği için görsel
   her genişlikte doğru hizalanır.
--------------------------------------------------------------------------- */
.cizim-sekmeler { display: flex; flex-wrap: wrap; gap: 8px;}
.cizim-sekme {
	border: 1px solid #d7dee6;
	background: #fff;
	color: #13233c;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cizim-sekme:hover { border-color: #13233c; background: #eef2f7;}
.cizim-sekme.aktif { background: #13233c; border-color: #13233c; color: #fff;}
.cizim-sekme-adet {
	background: #e7ecf2; color: #5a6673;
	border-radius: 999px; padding: 1px 7px;
	font-size: 12px; font-weight: 600;
}
.cizim-sekme.aktif .cizim-sekme-adet { background: #df232f; color: #fff;}

.cizim-kutu { display: none;}
.cizim-kutu.aktif { display: block;}

.cizim-sarmal {
	position: relative;
	display: inline-block;
	max-width: 100%;
	background: #fff;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
}
.cizim-gorsel { max-width: 100%; height: auto; display: block;}

.cizim-nokta {
	position: absolute;
	display: block;
	border: 1.5px solid rgba(223,35,47,.55);
	border-radius: 3px;
	background: rgba(223,35,47,.10);
	transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
	/* Çok küçük hedefler için dokunma alanı */
	min-width: 10px;
	min-height: 10px;
}
.cizim-nokta:hover,
.cizim-nokta:focus-visible {
	background: rgba(223,35,47,.28);
	border-color: #df232f;
	box-shadow: 0 0 0 2px rgba(223,35,47,.25);
	z-index: 3;
	outline: none;
}

/* Üzerine gelince çıkan bilgi balonu */
.cizim-nokta-balon {
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #13233c;
	color: #fff;
	border-radius: 6px;
	padding: 7px 10px;
	font-size: 12px;
	line-height: 1.35;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
	z-index: 5;
	text-align: center;
}
.cizim-nokta-balon b { display: block; font-size: 12px;}
.cizim-nokta-balon span { display: block; opacity: .85;}
.cizim-nokta-balon .cizim-nokta-fiyat { color: #ffd34d; opacity: 1; font-weight: 600; margin-top: 2px;}
.cizim-nokta:hover .cizim-nokta-balon,
.cizim-nokta:focus-visible .cizim-nokta-balon { display: block;}

/* Balon çizimin dışına taşmasın */
.cizim-nokta:first-child .cizim-nokta-balon { left: 0; transform: none;}

@media (max-width: 767.98px) {
	.cizim-nokta-balon { display: none !important;}  /* dokunmatikte tıklama yeter */
	.cizim-sekme { font-size: 13px; padding: 6px 12px;}
}

/* ===========================================================================
   MEGA MENÜ  —  ürün kategorileri gezinimi
   Üç seviyeli, 100.000+ ürünlük katalogda gezinme sayfa gövdesinden başlığa
   taşındı; kategori sayfaları artık doğrudan ürünle başlıyor.
   =========================================================================== */
.mega-nav {
	background: #fff;
	border-bottom: 1px solid #e6eaf0;
	position: relative;
	z-index: 1030;
}
.mega-nav-liste {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}
.mega-nav-oge { position: static;}

.mega-nav-baglanti {
	display: inline-flex;
	align-items: center;
	padding: 15px 22px;
	color: #13233c;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
	white-space: nowrap;
}
.mega-nav-baglanti:hover,
.mega-nav-oge.aktif > .mega-nav-baglanti {
	color: #df232f;
	border-bottom-color: #df232f;
}
.mega-nav-baglanti i { font-size: 12px; opacity: .6; transition: transform .15s ease;}
.mega-nav-oge:hover .mega-nav-baglanti i { transform: rotate(180deg);}

/* --- Açılan panel --- */
.mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-top: 1px solid #e6eaf0;
	box-shadow: 0 18px 38px rgba(19,35,60,.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	pointer-events: none;
}
.mega-nav-oge.has-panel:hover .mega-panel,
.mega-nav-oge.has-panel:focus-within .mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.mega-panel-ic { padding: 26px 0 8px;}

/* Tek alt seviye: alt kategoriler sütunlara yayılmış düz bir liste */
.mega-sutunlar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 2px 22px;
	max-height: 60vh;
	overflow-y: auto;
}
.mega-oge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	padding: 9px 12px;
	border-radius: 8px;
	color: #13233c;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}
.mega-oge:hover { background: #f6f8fa; color: #df232f;}
.mega-oge-ad { overflow: hidden; text-overflow: ellipsis;}
.mega-adet {
	flex: 0 0 auto;
	background: #f0f3f7;
	color: #6b7787;
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 600;
}

.mega-panel-alt {
	border-top: 1px solid #eef1f5;
	margin-top: 18px;
	padding: 12px 0 16px;
}
.mega-hepsi {
	color: #df232f;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.mega-hepsi:hover { text-decoration: underline;}

/* Kurumsal menü, mega menünün altında ince bir şerit */
.ikincil-menu { padding: 0;}
.ikincil-menu .nav-link { font-size: 14px; padding: 8px 14px;}

/* --- Mobil kategori çekmecesi --- */
.mobil-kategori { background: #fff; border-bottom: 1px solid #e6eaf0;}
.mobil-kategori-ac {
	width: 100%;
	border: 0;
	background: #fff;
	color: #13233c;
	font-weight: 600;
	padding: 12px 16px;
	text-align: left;
}
.kategori-cekmece { max-width: 88vw;}
.kategori-cekmece .accordion-button { font-weight: 600; color: #13233c;}
.kategori-cekmece .accordion-button:not(.collapsed) { background: #f6f8fa; color: #df232f;}
.kategori-cekmece .accordion-button:focus { box-shadow: none;}
.cekmece-hepsi {
	display: block;
	color: #df232f;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 0;
	text-decoration: none;
	border-bottom: 1px solid #eef1f5;
	margin-bottom: 6px;
}
.cekmece-alt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: #5a6673;
	font-size: 14px;
	padding: 7px 0;
	text-decoration: none;
	border-bottom: 1px solid #f4f6f9;
}
.cekmece-alt:last-child { border-bottom: 0;}
.cekmece-tek { text-decoration: none;}

/* ===========================================================================
   KATEGORİ GEZİNİMİ  —  kenar çubuğu + kompakt alt kategori şeridi
   Kart duvarı kaldırıldı; ürünler sayfanın en üstünde başlıyor.
   =========================================================================== */
.kategori-kenar {
	background: #fff;
	border: 1px solid #e6eaf0;
	border-radius: 10px;
	overflow: hidden;
}
.kategori-kenar-baslik {
	background: #13233c;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 16px;
}
.kat-kok {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	font-weight: 700;
	font-size: 14.5px;
	color: #13233c;
	text-decoration: none;
	border-bottom: 1px solid #eef1f5;
	background: #f8fafc;
}
.kat-kok:hover, .kat-kok.aktif { color: #df232f;}

.kat-liste { list-style: none; margin: 0; padding: 0;}
.kat-liste a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 16px;
	color: #5a6673;
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
	border-bottom: 1px solid #f4f6f9;
	transition: background .12s ease, color .12s ease;
}
.kat-liste a:hover { background: #f6f8fa; color: #13233c;}

.kat-oge.aktif > a {
	color: #df232f;
	font-weight: 700;
	background: #fff6f6;
	box-shadow: inset 3px 0 0 #df232f;
}
.kat-oge.yolda > a { font-weight: 600; color: #13233c;}

/* Alt seviyeler girintili ve biraz daha küçük */
.kat-seviye-1 a { padding-left: 30px; font-size: 13.5px;}
.kat-seviye-2 a { padding-left: 44px; font-size: 13px;}

.kat-adet {
	flex: 0 0 auto;
	background: #f0f3f7;
	color: #6b7787;
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 600;
}
.kat-oge.aktif > a .kat-adet { background: #df232f; color: #fff;}

.kategori-kenar-alt { padding: 11px 16px; border-top: 1px solid #eef1f5;}
.kategori-kenar-alt a { color: #6b7787; font-size: 13px; text-decoration: none;}
.kategori-kenar-alt a:hover { color: #df232f;}

.filtre-kutu { background: #fff; border: 1px solid #e6eaf0; border-radius: 10px;}

/* --- Alt kategori şeridi (ürünlerin hemen üstünde, tek satır) --- */
.alt-kategori-serit {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 2px 2px 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid #eef1f5;
	scrollbar-width: thin;
}
.alt-kategori-pul {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 260px;
	padding: 7px 14px 7px 7px;
	background: #fff;
	border: 1px solid #e0e6ee;
	border-radius: 999px;
	color: #13233c;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.alt-kategori-pul:hover { border-color: #13233c; background: #f6f8fa; color: #13233c;}
.alt-kategori-pul img {
	width: 34px; height: 34px;
	object-fit: contain;
	border-radius: 50%;
	background: #f6f8fa;
	flex: 0 0 auto;
}
.alt-kategori-pul span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 991.98px) {
	#productSideBar.acik { display: block !important;}
	.alt-kategori-pul { font-size: 13px; max-width: 210px;}
}