@charset "UTF-8";

/* ==========================================================================
   Urun listesi / kategori / arama
   ========================================================================== */

.urun-liste-baslik {
	border-bottom: 1px solid #e9ecef;
	padding-bottom: .85rem;
	margin-bottom: 1.75rem;
}

	.urun-liste-baslik h1 {
		font-size: 1.5rem;
		font-weight: 700;
		color: #212529;
		margin: 0;
		line-height: 1.3;
	}

	.urun-liste-baslik .urun-liste-adet {
		font-size: .8125rem;
		color: #8a9099;
		font-weight: 500;
	}

/* --- Urun karti --- */
.urun-kart {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #ebedf0;
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

	.urun-kart:hover {
		transform: translateY(-4px);
		border-color: var(--primary-rgba-30, rgba(0,136,204,.3));
		box-shadow: 0 12px 28px rgba(18, 25, 38, .12);
	}

.urun-kart-gorsel {
	position: relative;
	display: block;
	height: 260px;
	background: #fff;
	padding: 14px;
	overflow: hidden;
}

	.urun-kart-gorsel img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform .35s ease;
	}

.urun-kart:hover .urun-kart-gorsel img {
	transform: scale(1.06);
}

.urun-kart-rozetler {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	z-index: 2;
}

.urun-rozet {
	display: inline-block;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .22rem .5rem;
	border-radius: 999px;
	line-height: 1.4;
}

.urun-rozet-stok {
	background: #e8f7ee;
	color: #1c7c46;
}

.urun-rozet-indirim {
	background: #fdecec;
	color: #c0392b;
}

.urun-kart-govde {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: .9rem 1rem 1rem;
}

.urun-kart-kod {
	display: inline-block;
	align-self: flex-start;
	font-family: Consolas, "Courier New", monospace;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .03em;
	color: #5b6470;
	background: #f1f3f5;
	border-radius: 5px;
	padding: .16rem .45rem;
	margin-bottom: .5rem;
}

.urun-kart-baslik {
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 .6rem;
	min-height: 2.6em;
	text-align: center;
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

	.urun-kart-baslik a {
		color: #212529;
		text-decoration: none;
		transition: color .2s ease;
	}

		.urun-kart-baslik a:hover {
			color: var(--primary, #0088CC);
		}

.urun-kart-ozellik {
	list-style: none;
	margin: 0 0 .75rem;
	padding: .6rem 0 0;
	border-top: 1px dashed #e9ecef;
	font-size: .75rem;
	color: #6c757d;
}

	.urun-kart-ozellik li {
		display: flex;
		align-items: center;
		gap: .4rem;
		padding: .15rem 0;
		min-width: 0;
	}

	.urun-kart-ozellik i {
		width: 13px;
		font-size: .7rem;
		color: #adb5bd;
		flex: 0 0 auto;
	}

	.urun-kart-ozellik .etiket {
		flex: 0 0 auto;
	}

	.urun-kart-ozellik .deger {
		margin-left: auto;
		font-weight: 600;
		color: #343a40;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

/* Kart üst bilgi: logo + ürün kodu / koli içi adet */
.urun-kart-ust {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .8rem 1rem .35rem;
	background: #fff;
}

.urun-kart-logo {
	width: 52px;
	height: auto;
	flex: 0 0 auto;
}

.urun-kart-kimlik {
	display: flex;
	flex-direction: column;
	gap: .12rem;
	min-width: 0;
	font-size: .78rem;
	color: #495057;
	line-height: 1.35;
}

	.urun-kart-kimlik strong {
		font-weight: 700;
		color: #212529;
	}

/* Stok / fiyat satırları */
.urun-kart-bilgi {
	margin: 0 0 .8rem;
	padding: .65rem 0 0;
	border-top: 1px dashed #e9ecef;
	font-size: .78rem;
	color: #495057;
}

	.urun-kart-bilgi .satir {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: .25rem .75rem;
		padding: .18rem 0;
	}

	.urun-kart-bilgi strong {
		font-weight: 700;
		color: #212529;
	}

	.urun-kart-bilgi .net,
	.urun-kart-bilgi .net strong {
		color: #c0392b;
	}

		.urun-kart-bilgi .net strong {
			font-size: .9375rem;
		}

/* Adet girişi + ekle butonu */
.urun-kart-sepet {
	display: flex;
	align-items: stretch;
	gap: .5rem;
}

	.urun-kart-sepet input {
		flex: 1 1 auto;
		width: 0;
		min-width: 0;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		text-align: center;
		font-size: .9375rem;
		font-weight: 600;
		color: #212529;
		padding: .5rem .4rem;
		-moz-appearance: textfield;
	}

		.urun-kart-sepet input::-webkit-outer-spin-button,
		.urun-kart-sepet input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

.urun-kart-ekle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	border: 0;
	border-radius: 8px;
	background: #4e8c34;
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .55rem .95rem;
	transition: background-color .2s ease, transform .2s ease;
}

	.urun-kart-ekle:hover {
		background: #40752a;
		color: #fff;
		transform: translateY(-1px);
	}

.urun-kart-not {
	display: block;
	margin-top: .4rem;
	font-size: .6875rem;
	color: #8a9099;
}

.urun-kart-alt {
	margin-top: auto;
}

.urun-kart-fiyat {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .45rem;
	margin-bottom: .7rem;
}

	.urun-kart-fiyat .net {
		font-size: 1.1875rem;
		font-weight: 700;
		color: #212529;
		line-height: 1.2;
	}

	.urun-kart-fiyat .liste {
		font-size: .8125rem;
		color: #adb5bd;
		text-decoration: line-through;
	}

.urun-kart-giris {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .7rem;
	padding: .5rem .65rem;
	border: 1px dashed #d7dbe0;
	border-radius: 8px;
	background: #fafbfc;
	font-size: .75rem;
	color: #6c757d;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

	.urun-kart-giris:hover {
		border-color: var(--primary, #0088CC);
		background: var(--primary-rgba-10, rgba(0,136,204,.06));
		color: var(--primary, #0088CC);
	}

	.urun-kart-giris i {
		font-size: .8125rem;
		color: var(--primary, #0088CC);
		flex: 0 0 auto;
	}

	.urun-kart-giris strong {
		display: block;
		font-weight: 600;
		color: #495057;
	}

	.urun-kart-giris:hover strong {
		color: var(--primary, #0088CC);
	}

.urun-kart-btn {
	display: block;
	width: 100%;
	text-align: center;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .55rem .5rem;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	color: #495057;
	background: #fff;
	transition: all .2s ease;
}

	.urun-kart-btn:hover {
		background: var(--primary, #0088CC);
		border-color: var(--primary, #0088CC);
		color: #fff;
	}

.urun-bos {
	text-align: center;
	padding: 3.5rem 1rem;
	color: #8a9099;
}

	.urun-bos i {
		font-size: 2.5rem;
		color: #dee2e6;
		margin-bottom: 1rem;
	}

@media (max-width: 575.98px) {
	.urun-kart-gorsel {
		height: 165px;
		padding: 10px;
	}

	.urun-kart-govde {
		padding: .7rem .75rem .8rem;
	}

	.urun-kart-baslik {
		font-size: .8125rem;
	}

	.urun-kart-ozellik {
		font-size: .6875rem;
	}

	.urun-kart-fiyat .net {
		font-size: 1rem;
	}

	.urun-kart-ust {
		padding: .6rem .75rem .3rem;
		gap: .5rem;
	}

	.urun-kart-logo {
		width: 40px;
	}

	.urun-kart-kimlik {
		font-size: .6875rem;
	}

	.urun-kart-bilgi {
		font-size: .6875rem;
	}

		.urun-kart-bilgi .satir {
			flex-direction: column;
			align-items: flex-start;
			gap: .05rem;
		}

		.urun-kart-bilgi .net strong {
			font-size: .875rem;
		}

	.urun-kart-sepet input {
		font-size: .875rem;
		padding: .45rem .3rem;
	}

	.urun-kart-ekle {
		padding: .45rem .7rem;
	}
}

/* ==========================================================================
   Urun detay
   ========================================================================== */

.urun-detay-yol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: .8125rem;
	color: #8a9099;
}

	.urun-detay-yol a {
		color: #8a9099;
		text-decoration: none;
		transition: color .2s ease;
	}

		.urun-detay-yol a:hover {
			color: var(--primary, #0088CC);
		}

	.urun-detay-yol li + li:before {
		content: "/";
		margin-right: .4rem;
		color: #ced4da;
	}

	.urun-detay-yol .aktif {
		color: #495057;
		font-weight: 500;
	}

/* --- Galeri --- */
.urun-galeri-ana {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 460px;
	background: #f7f8f9;
	border: 1px solid #ebedf0;
	border-radius: 14px;
	overflow: hidden;
	padding: 20px;
	cursor: zoom-in;
}

	.urun-galeri-ana img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		transition: transform .35s ease;
	}

	.urun-galeri-ana:hover img {
		transform: scale(1.04);
	}

.urun-galeri-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	box-shadow: 0 2px 8px rgba(18,25,38,.14);
	color: #495057;
	font-size: .8125rem;
	pointer-events: none;
}

.urun-galeri-thumbs {
	display: flex;
	gap: .55rem;
	margin-top: .75rem;
	overflow-x: auto;
	padding-bottom: .35rem;
	scrollbar-width: thin;
}

	.urun-galeri-thumbs::-webkit-scrollbar {
		height: 5px;
	}

	.urun-galeri-thumbs::-webkit-scrollbar-thumb {
		background: #dee2e6;
		border-radius: 999px;
	}

.urun-galeri-thumb {
	flex: 0 0 auto;
	width: 74px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 9px;
	padding: 5px;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}

	.urun-galeri-thumb img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.urun-galeri-thumb:hover {
		border-color: #ced4da;
	}

	.urun-galeri-thumb.aktif {
		border-color: var(--primary, #0088CC);
		box-shadow: 0 0 0 2px var(--primary-rgba-20, rgba(0,136,204,.2));
	}

/* --- Ozet --- */
.urun-detay-ust {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: .65rem;
}

.urun-detay-baslik {
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.3;
	color: #212529;
	text-transform: none;
	margin: 0 0 1.1rem;
}

.urun-detay-ozellik {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 1px solid #ebedf0;
	border-radius: 12px;
	overflow: hidden;
}

	.urun-detay-ozellik li {
		display: flex;
		align-items: center;
		gap: .6rem;
		padding: .6rem .9rem;
		font-size: .8125rem;
		color: #6c757d;
		background: #fff;
	}

		.urun-detay-ozellik li:nth-child(even) {
			background: #fafbfc;
		}

		.urun-detay-ozellik li + li {
			border-top: 1px solid #f1f3f5;
		}

	.urun-detay-ozellik i {
		width: 16px;
		text-align: center;
		color: #adb5bd;
		font-size: .8125rem;
		flex: 0 0 auto;
	}

	.urun-detay-ozellik .deger {
		margin-left: auto;
		font-weight: 600;
		color: #212529;
		text-align: right;
		word-break: break-word;
	}

/* --- Fiyat kutusu --- */
.urun-detay-fiyat {
	border: 1px solid #ebedf0;
	border-radius: 12px;
	padding: 1rem 1.15rem;
	background: #fff;
	margin-bottom: 1.25rem;
}

	.urun-detay-fiyat .satir {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: .6rem;
	}

	.urun-detay-fiyat .net {
		font-size: 1.875rem;
		font-weight: 700;
		color: #212529;
		line-height: 1.1;
	}

	.urun-detay-fiyat .liste {
		font-size: 1rem;
		color: #adb5bd;
		text-decoration: line-through;
	}

	.urun-detay-fiyat .not {
		display: block;
		margin-top: .35rem;
		font-size: .75rem;
		color: #8a9099;
	}

.urun-detay-giris {
	display: flex;
	align-items: center;
	gap: .85rem;
	border: 1px dashed #d7dbe0;
	border-radius: 12px;
	background: #fafbfc;
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
}

	.urun-detay-giris .ikon {
		width: 42px;
		height: 42px;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--primary-rgba-10, rgba(0,136,204,.08));
		color: var(--primary, #0088CC);
		font-size: 1rem;
	}

	.urun-detay-giris strong {
		display: block;
		font-size: .9375rem;
		font-weight: 600;
		color: #212529;
		line-height: 1.4;
	}

	.urun-detay-giris span {
		font-size: .8125rem;
		color: #8a9099;
	}

	.urun-detay-giris .btn-giris {
		margin-left: auto;
		flex: 0 0 auto;
		font-size: .75rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		text-decoration: none;
		padding: .55rem 1.1rem;
		border-radius: 8px;
		background: var(--primary, #0088CC);
		color: #fff;
		transition: opacity .2s ease;
	}

		.urun-detay-giris .btn-giris:hover {
			opacity: .88;
			color: #fff;
		}

/* --- Sepet alani --- */
.urun-detay-sepet {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: .6rem;
}

/* Sipariş birimi seçimi (box / koli) */
.urun-birim {
	display: flex;
	flex: 1 1 100%;
	gap: .5rem;
	margin-bottom: .2rem;
}

	.urun-birim button {
		flex: 0 1 150px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: .1rem;
		border: 1px solid #dee2e6;
		border-radius: 9px;
		background: #fff;
		padding: .5rem .8rem;
		font-size: .8125rem;
		font-weight: 600;
		color: #495057;
		line-height: 1.2;
		transition: border-color .2s ease, background-color .2s ease, color .2s ease;
	}

		.urun-birim button small {
			font-size: .6875rem;
			font-weight: 500;
			color: #8a9099;
		}

		.urun-birim button:hover {
			border-color: #ced4da;
		}

		.urun-birim button.aktif {
			border-color: var(--primary, #0088CC);
			background: var(--primary-rgba-10, rgba(0,136,204,.06));
			color: var(--primary, #0088CC);
			box-shadow: 0 0 0 2px var(--primary-rgba-20, rgba(0,136,204,.18));
		}

			.urun-birim button.aktif small {
				color: var(--primary, #0088CC);
			}

.urun-adet {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #dee2e6;
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
}

	.urun-adet button {
		width: 40px;
		border: 0;
		background: #f8f9fa;
		color: #495057;
		font-size: 1rem;
		line-height: 1;
		transition: background-color .2s ease, color .2s ease;
	}

		.urun-adet button:hover {
			background: var(--primary, #0088CC);
			color: #fff;
		}

	.urun-adet input {
		width: 78px;
		border: 0;
		border-left: 1px solid #e9ecef;
		border-right: 1px solid #e9ecef;
		text-align: center;
		font-size: .9375rem;
		font-weight: 600;
		color: #212529;
		padding: .55rem .25rem;
		-moz-appearance: textfield;
	}

		.urun-adet input::-webkit-outer-spin-button,
		.urun-adet input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

.urun-sepet-btn {
	flex: 1 1 190px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 0;
	border-radius: 9px;
	background: var(--primary, #0088CC);
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .7rem 1.2rem;
	transition: opacity .2s ease, transform .2s ease;
}

	.urun-sepet-btn:hover {
		opacity: .9;
		transform: translateY(-1px);
		color: #fff;
	}

.urun-adet-not {
	display: block;
	width: 100%;
	margin-top: .5rem;
	font-size: .75rem;
	color: #8a9099;
}

.urun-renk-secim {
	margin-bottom: 1.1rem;
}

	.urun-renk-secim label {
		display: block;
		font-size: .75rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #6c757d;
		margin-bottom: .35rem;
	}

	.urun-renk-secim select {
		max-width: 260px;
		border: 1px solid #dee2e6;
		border-radius: 9px;
		padding: .55rem .75rem;
		font-size: .875rem;
		color: #212529;
		background-color: #fff;
	}

/* --- Sepet satiri miktar duzenleme --- */
.sepet-miktar {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
}

	.sepet-miktar .urun-adet button {
		width: 32px;
		font-size: .875rem;
	}

	.sepet-miktar .urun-adet input {
		width: 56px;
		padding: .35rem .2rem;
		font-size: .875rem;
	}

	.sepet-miktar .sepet-toplam-adet {
		font-size: .75rem;
	}

.sepet-birim {
	display: inline-flex;
	gap: .25rem;
}

	.sepet-birim button {
		border: 1px solid #dee2e6;
		border-radius: 6px;
		background: #fff;
		padding: .15rem .5rem;
		font-size: .6875rem;
		font-weight: 600;
		color: #6c757d;
		transition: border-color .2s ease, background-color .2s ease, color .2s ease;
	}

		.sepet-birim button:hover {
			border-color: #ced4da;
		}

		.sepet-birim button.aktif {
			border-color: var(--primary, #0088CC);
			background: var(--primary-rgba-10, rgba(0,136,204,.08));
			color: var(--primary, #0088CC);
		}

/* --- Aciklama --- */
.urun-detay-blok {
	border: 1px solid #ebedf0;
	border-radius: 12px;
	padding: 1.35rem 1.5rem;
	background: #fff;
}

	.urun-detay-blok h4 {
		font-size: .8125rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: #212529;
		margin: 0 0 .9rem;
		padding-bottom: .6rem;
		border-bottom: 1px solid #f1f3f5;
	}

	.urun-detay-blok .icerik {
		font-size: .875rem;
		line-height: 1.75;
		color: #6c757d;
	}

		.urun-detay-blok .icerik img {
			max-width: 100%;
			height: auto;
		}

		.urun-detay-blok .icerik p:last-child {
			margin-bottom: 0;
		}

/* --- Benzer urunler --- */
.urun-benzer-baslik {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

	.urun-benzer-baslik h4 {
		font-size: 1.125rem;
		font-weight: 700;
		color: #212529;
		margin: 0;
		text-transform: none;
		white-space: nowrap;
	}

	.urun-benzer-baslik:after {
		content: "";
		flex: 1 1 auto;
		height: 1px;
		background: #e9ecef;
	}

.urun-mini-kart {
	display: block;
	text-decoration: none;
	border: 1px solid #ebedf0;
	border-radius: 11px;
	overflow: hidden;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

	.urun-mini-kart:hover {
		transform: translateY(-3px);
		border-color: var(--primary-rgba-30, rgba(0,136,204,.3));
		box-shadow: 0 10px 22px rgba(18,25,38,.1);
	}

	.urun-mini-kart .gorsel {
		display: flex;
		height: 160px;
		background: #f7f8f9;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
	}

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

	.urun-mini-kart .govde {
		display: block;
		padding: .6rem .7rem .75rem;
	}

	.urun-mini-kart .kod {
		display: block;
		font-family: Consolas, "Courier New", monospace;
		font-size: .625rem;
		font-weight: 600;
		color: #adb5bd;
		margin-bottom: .2rem;
	}

	.urun-mini-kart .ad {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: .8125rem;
		font-weight: 600;
		line-height: 1.4;
		color: #343a40;
		min-height: 2.3em;
	}

	.urun-mini-kart:hover .ad {
		color: var(--primary, #0088CC);
	}

@media (max-width: 991.98px) {
	.urun-galeri-ana {
		height: 340px;
	}

	.urun-detay-baslik {
		font-size: 1.375rem;
	}
}

@media (max-width: 575.98px) {
	.urun-galeri-ana {
		height: 280px;
		padding: 14px;
	}

	.urun-detay-fiyat .net {
		font-size: 1.5rem;
	}

	.urun-detay-giris {
		flex-wrap: wrap;
	}

		.urun-detay-giris .btn-giris {
			margin-left: 0;
			width: 100%;
			text-align: center;
		}
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Üst şerit */
.header-ust {
	background: #212832;
	font-size: .75rem;
	padding: .4rem 0;
}

	.header-ust .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

.header-ust-sol {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	color: #aab2bd;
}

	.header-ust-sol span {
		display: inline-flex;
		align-items: center;
		gap: .4rem;
		white-space: nowrap;
	}

	.header-ust-sol i {
		font-size: .7rem;
		color: #6c7683;
	}

.header-ust-nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
	min-width: 0;
}

	.header-ust-nav a {
		color: #cfd6de;
		text-decoration: none;
		font-weight: 500;
		white-space: nowrap;
		transition: color .2s ease;
	}

		.header-ust-nav a:hover {
			color: #fff;
		}

	.header-ust-nav .cikis {
		color: #f1998e;
	}

		.header-ust-nav .cikis:hover {
			color: #ffb4a9;
		}

	.header-ust-nav .giris {
		display: inline-flex;
		align-items: center;
		gap: .4rem;
		background: var(--primary, #0088CC);
		color: #fff;
		border-radius: 999px;
		padding: .2rem .8rem;
	}

		.header-ust-nav .giris:hover {
			color: #fff;
			opacity: .88;
		}

.header-ust-cari {
	align-items: center;
	gap: .4rem;
	color: #fff;
	font-weight: 600;
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

	.header-ust-cari i {
		color: var(--primary, #0088CC);
	}

/* Ana satır: logo + arama + sepet */
.header-orta {
	padding: .9rem 0;
}

	.header-orta .container {
		display: flex;
		align-items: center;
		gap: 1.25rem;
	}

#header .header-orta .header-logo {
	margin: 0;
	flex: 0 0 auto;
}

.header-ara {
	flex: 1 1 auto;
	max-width: 620px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: .5rem;
	background: #f1f3f5;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: .25rem .25rem .25rem 1rem;
	transition: border-color .2s ease, background-color .2s ease;
}

	.header-ara:focus-within {
		background: #fff;
		border-color: var(--primary, #0088CC);
	}

	.header-ara > i {
		color: #8a9099;
		font-size: .875rem;
		flex: 0 0 auto;
	}

	.header-ara input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		background: transparent;
		font-size: .875rem;
		color: #212529;
		outline: none;
		padding: .4rem 0;
	}

	.header-ara button {
		flex: 0 0 auto;
		border: 0;
		border-radius: 999px;
		background: var(--primary, #0088CC);
		color: #fff;
		font-size: .8125rem;
		font-weight: 600;
		padding: .45rem 1.2rem;
		transition: opacity .2s ease;
	}

		.header-ara button:hover {
			opacity: .9;
		}

.header-sepet {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 1px solid var(--primary-rgba-30, rgba(0,136,204,.3));
	background: var(--primary-rgba-10, rgba(0,136,204,.06));
	color: var(--primary, #0088CC);
	border-radius: 10px;
	padding: .55rem .95rem;
	font-size: .8125rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

	.header-sepet:hover {
		background: var(--primary, #0088CC);
		color: #fff;
	}

	.header-sepet i {
		font-size: 1rem;
	}

/* Menü satırı */
.header-alt {
	border-top: 1px solid #eef0f2;
}

	.header-alt .header-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .1rem 0;
	}

#header .header-nav-main nav > ul > li > a {
	font-size: .8125rem;
	font-weight: 600;
	text-transform: none;
	color: #343a40;
}

	#header .header-nav-main nav > ul > li > a.active {
		color: var(--primary, #0088CC);
	}

	/* Hover / açık dropdown: mavi zemin + beyaz yazı.
	   Tema gri zemin + beyaz yazı veriyordu, yazı okunmuyordu. */
	#header .header-nav-main nav > ul > li.open > a,
	#header .header-nav-main nav > ul > li:hover > a,
	#header .header-nav-main nav > ul > li.dropdown.open > a,
	#header .header-nav-main nav > ul > li.dropdown:hover > a {
		background: var(--primary, #0088CC);
		color: #fff;
	}

	/* Aktif (bulunulan sayfa) linki hover'dayken de beyaz kalsın */
	#header .header-nav-main nav > ul > li:hover > a.active {
		color: #fff;
	}

	/* Dropdown açıkken linki menüye bağlayan alt şerit de mavi olsun */
	#header .header-nav-main nav > ul > li.dropdown.open > a:before,
	#header .header-nav-main nav > ul > li.dropdown:hover > a:before {
		border-bottom-color: var(--primary, #0088CC);
	}

#header .header-nav-main nav > ul > li.nav-admin > a {
	background: #fff4e8;
	color: #c05621;
	border-radius: 8px;
}

	#header .header-nav-main nav > ul > li.nav-admin > a i {
		margin-right: .3rem;
	}

@media (max-width: 991.98px) {
	.header-orta .container {
		flex-wrap: wrap;
		gap: .75rem;
	}

	.header-ara {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.header-sepet {
		margin-left: auto;
	}

	#header .header-orta .header-logo img {
		max-width: 150px;
		height: auto;
	}
}

@media (max-width: 575.98px) {
	.header-ust {
		font-size: .6875rem;
	}

	.header-ust-nav {
		width: 100%;
		justify-content: flex-end;
		gap: .75rem;
	}
}

/* ==========================================================================
   Sepet sayfası
   ========================================================================== */

.sepet-liste {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.sepet-satir {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #fff;
	border: 1px solid #ebedf0;
	border-radius: 12px;
	padding: .9rem 1rem;
	transition: box-shadow .2s ease, border-color .2s ease;
}

	.sepet-satir:hover {
		border-color: var(--primary-rgba-30, rgba(0,136,204,.3));
		box-shadow: 0 8px 20px rgba(18, 25, 38, .08);
	}

.sepet-gorsel {
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f8f9;
	border-radius: 10px;
	padding: 6px;
	overflow: hidden;
}

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

.sepet-bilgi {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

	.sepet-bilgi .ad {
		font-size: .9rem;
		font-weight: 600;
		color: #212529;
		text-decoration: none;
		line-height: 1.4;
		transition: color .2s ease;
	}

		.sepet-bilgi .ad:hover {
			color: var(--primary, #0088CC);
		}

	.sepet-bilgi .renk {
		font-size: .75rem;
		color: #6c757d;
	}

		.sepet-bilgi .renk i {
			color: #adb5bd;
			margin-right: .2rem;
		}

	.sepet-bilgi .birim {
		font-size: .75rem;
		color: #8a9099;
	}

		.sepet-bilgi .birim strong {
			color: #343a40;
			font-weight: 600;
		}

.sepet-islem {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.sepet-tutar {
	min-width: 96px;
	text-align: right;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #212529;
	white-space: nowrap;
}

.sepet-sil {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: #fdecec;
	color: #c0392b;
	font-size: .8125rem;
	transition: background-color .2s ease, color .2s ease;
}

	.sepet-sil:hover {
		background: #c0392b;
		color: #fff;
	}

/* Sipariş özeti */
.sepet-ozet {
	background: #fff;
	border: 1px solid #ebedf0;
	border-radius: 14px;
	padding: 1.25rem 1.35rem;
}

	.sepet-ozet h4 {
		font-size: .8125rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: #212529;
		margin: 0 0 1rem;
		padding-bottom: .7rem;
		border-bottom: 1px solid #f1f3f5;
	}

.sepet-ozet-aciklama {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-bottom: 1rem;
}

	.sepet-ozet-aciklama input {
		border: 1px solid #dee2e6;
		border-radius: 9px;
		font-size: .8125rem;
		padding: .55rem .75rem;
	}

.sepet-ozet-satirlar {
	margin-bottom: 1.1rem;
}

.sepet-ozet-satir {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .3rem 0;
	font-size: .8125rem;
	color: #6c757d;
}

	.sepet-ozet-satir strong {
		color: #343a40;
		font-weight: 600;
	}

	.sepet-ozet-satir.indirim,
	.sepet-ozet-satir.indirim strong {
		color: #1c7c46;
	}

.sepet-ozet-net {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .5rem;
	padding-top: .7rem;
	border-top: 1px dashed #e9ecef;
	font-size: .875rem;
	font-weight: 600;
	color: #212529;
}

	.sepet-ozet-net strong {
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--primary, #0088CC);
	}

.sepet-btn-kaydet,
.sepet-btn-temizle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	border-radius: 10px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .8rem 1rem;
	transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

.sepet-btn-kaydet {
	background: var(--primary, #0088CC);
	color: #fff;
	margin-bottom: .6rem;
}

	.sepet-btn-kaydet:hover {
		opacity: .9;
		color: #fff;
	}

.sepet-btn-temizle {
	background: #fff;
	border: 1px solid #f1d0cb;
	color: #c0392b;
}

	.sepet-btn-temizle:hover {
		background: #fdecec;
		color: #c0392b;
	}

@media (max-width: 767.98px) {
	.sepet-satir {
		flex-wrap: wrap;
		gap: .75rem;
	}

	.sepet-gorsel {
		width: 68px;
		height: 68px;
	}

	.sepet-bilgi {
		padding-right: 2.2rem;
	}

	.sepet-islem {
		flex-basis: 100%;
		justify-content: space-between;
		gap: .75rem;
		margin-top: .1rem;
		padding-top: .7rem;
		border-top: 1px dashed #e9ecef;
	}

	.sepet-sil {
		position: absolute;
		top: .75rem;
		right: .75rem;
	}
}

/* ==========================================================================
   Ürün detay modalı
   ========================================================================== */

.urun-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(18, 25, 38, .55);
	backdrop-filter: blur(4px);
	z-index: 1060;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

	.urun-modal.acik {
		display: flex;
	}

body.urun-modal-acik {
	overflow: hidden;
}

.urun-modal-icerik {
	position: relative;
	width: 100%;
	max-width: 980px;
	max-height: calc(100vh - 2.5rem);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(18, 25, 38, .3);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.urun-modal-kapat {
	position: absolute;
	top: .75rem;
	right: .75rem;
	z-index: 5;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #f1f3f5;
	color: #495057;
	font-size: 1.25rem;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease;
}

	.urun-modal-kapat:hover {
		background: #c0392b;
		color: #fff;
	}

.urun-modal-govde {
	overflow-y: auto;
	padding: 1.5rem;
}

.urun-modal-yukleniyor {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	font-size: 1.5rem;
	color: #adb5bd;
}

/* Modal içi detay düzeni */
.umd {
	display: flex;
	gap: 1.75rem;
	align-items: flex-start;
}

.umd-galeri {
	flex: 0 0 42%;
	min-width: 0;
}

.umd-ana {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 320px;
	background: #f7f8f9;
	border: 1px solid #ebedf0;
	border-radius: 12px;
	padding: 14px;
	overflow: hidden;
	cursor: zoom-in;
}

	.umd-ana img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

.umd-thumbs {
	display: flex;
	gap: .5rem;
	margin-top: .6rem;
	overflow-x: auto;
	padding-bottom: .3rem;
}

.umd-thumb {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 4px;
	cursor: pointer;
	transition: border-color .2s ease;
}

	.umd-thumb img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.umd-thumb:hover {
		border-color: #ced4da;
	}

	.umd-thumb.aktif {
		border-color: var(--primary, #0088CC);
		box-shadow: 0 0 0 2px var(--primary-rgba-20, rgba(0,136,204,.2));
	}

.umd-bilgi {
	flex: 1 1 auto;
	min-width: 0;
}

.umd-ust {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: .5rem;
	padding-right: 2.5rem;
}

.umd-baslik {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
	color: #212529;
	text-transform: none;
	margin: 0 0 .9rem;
}

.umd-ozellik {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	border: 1px solid #ebedf0;
	border-radius: 10px;
	overflow: hidden;
	font-size: .8125rem;
	color: #6c757d;
}

	.umd-ozellik li {
		display: flex;
		align-items: center;
		gap: .6rem;
		padding: .5rem .8rem;
	}

		.umd-ozellik li:nth-child(even) {
			background: #fafbfc;
		}

		.umd-ozellik li + li {
			border-top: 1px solid #f1f3f5;
		}

	.umd-ozellik .deger {
		margin-left: auto;
		font-weight: 600;
		color: #212529;
	}

.umd-fiyat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .25rem .75rem;
	border: 1px solid #ebedf0;
	border-radius: 10px;
	background: #fff;
	padding: .7rem .9rem;
	margin-bottom: 1rem;
	font-size: .8125rem;
	color: #495057;
}

	.umd-fiyat strong {
		font-weight: 700;
		color: #212529;
	}

	.umd-fiyat .net,
	.umd-fiyat .net strong {
		color: #c0392b;
	}

		.umd-fiyat .net strong {
			font-size: 1.0625rem;
		}

.umd-satin .renk-secim {
	max-width: 240px;
	margin-bottom: .6rem;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	font-size: .8125rem;
	padding: .45rem .65rem;
}

.umd-detay-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .9rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--primary, #0088CC);
	text-decoration: none;
}

	.umd-detay-link:hover {
		text-decoration: underline;
		color: var(--primary, #0088CC);
	}

.umd-aciklama {
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid #f1f3f5;
}

	.umd-aciklama h5 {
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: #212529;
		margin: 0 0 .5rem;
	}

	.umd-aciklama .icerik {
		font-size: .8125rem;
		line-height: 1.7;
		color: #6c757d;
		max-height: 180px;
		overflow-y: auto;
	}

		.umd-aciklama .icerik img {
			max-width: 100%;
			height: auto;
		}

/* Görsel büyütme / galeri katmanı: ürün modalının da üzerinde açılır */
.resim-buyut {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1080;
	background: rgba(10, 14, 20, .78);
	backdrop-filter: blur(5px);
	align-items: center;
	justify-content: center;
	padding: 2rem;
	cursor: zoom-out;
}

	.resim-buyut.acik {
		display: flex;
	}

.resim-buyut-kapat {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}

	.resim-buyut-kapat:hover {
		background: #c0392b;
	}

.resim-buyut-icerik {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
	cursor: default;
}

	.resim-buyut-icerik .buyuk {
		flex: 1 1 auto;
		min-height: 0;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
	}

.resim-buyut-thumbs {
	display: flex;
	justify-content: center;
	gap: .5rem;
	max-width: 100%;
	overflow-x: auto;
	padding: .2rem;
	flex: 0 0 auto;
}

	.resim-buyut-thumbs:empty {
		display: none;
	}

.resim-buyut-thumb {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 4px;
	cursor: pointer;
	transition: border-color .2s ease;
}

	.resim-buyut-thumb img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.resim-buyut-thumb:hover {
		border-color: rgba(255, 255, 255, .5);
	}

	.resim-buyut-thumb.aktif {
		border-color: var(--primary, #0088CC);
	}

/* Kart / modal birim seçici */
.urun-kart-sepet select.birim {
	flex: 0 0 auto;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	background: #fff;
	font-size: .78rem;
	font-weight: 600;
	color: #343a40;
	padding: .45rem .3rem;
}

@media (max-width: 767.98px) {
	.urun-modal {
		padding: .6rem;
	}

	.urun-modal-govde {
		padding: 1rem;
	}

	.umd {
		flex-direction: column;
		gap: 1rem;
	}

	.umd-galeri {
		flex: 1 1 auto;
		width: 100%;
	}

	.umd-ana {
		height: 230px;
	}

	.umd-baslik {
		font-size: 1.0625rem;
		padding-right: 1.5rem;
	}

	.resim-buyut {
		padding: 1rem;
	}
}