@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--genislik: 1280px;
	--radius: 12px;
	--site-sticky-header-h: 182px;
	--site-sticky-gutter: 10px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	color: var(--renk-metin);
	background: var(--renk-acik);
	line-height: 1.5;
}

a { color: inherit; }

.mg-ikon { flex-shrink: 0; }

.dt-ikon-kutu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	flex-shrink: 0;
	margin-bottom: 14px;
}
.dt-ikon-kutu.dt-ikon-indigo { background: var(--marka-mavi-soft); color: var(--marka-mavi); }
.dt-ikon-kutu.dt-ikon-mavi { background: var(--dt-ikon-mavi-bg); color: var(--dt-ikon-mavi-fg); }
.dt-ikon-kutu.dt-ikon-turuncu { background: var(--dt-ikon-turuncu-bg); color: var(--dt-ikon-turuncu-fg); }
.dt-ikon-kutu.dt-ikon-mor { background: var(--dt-ikon-mor-bg); color: var(--dt-ikon-mor-fg); }
.dt-ikon-kutu.dt-ikon-yesil { background: var(--dt-ikon-yesil-bg); color: var(--dt-ikon-yesil-fg); }
.dt-ikon-kutu.dt-ikon-amber { background: var(--dt-ikon-amber-bg); color: var(--dt-ikon-amber-fg); }
.dt-ikon-kutu.dt-ikon-pembe { background: var(--dt-ikon-pembe-bg); color: var(--dt-ikon-pembe-fg); }
.dt-ikon-kutu.dt-ikon-gri { background: var(--dt-ikon-gri-bg); color: var(--dt-ikon-gri-fg); }

.container {
	max-width: var(--genislik);
	margin: 0 auto;
	padding: 0 20px;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--renk-beyaz);
	border-bottom: 1px solid var(--renk-sinir);
	margin-bottom: 0;
	overflow: visible;
}

.site-header-ust {
	position: relative;
	background: var(--renk-beyaz);
}

.ust-bar {
	background: var(--marka-gradient-yatay);
	color: var(--marka-bar-metin);
	font-size: 13px;
}

.ust-bar-ic {
	display: flex;
	gap: 20px;
	align-items: center;
	min-height: 38px;
	flex-wrap: wrap;
}

.ust-bar-kur {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ust-bar-kur strong { color: var(--marka-bar-metin-guclu); }

.ust-bar-iletisim {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: 0.95;
}

.ust-bar-vitrin-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s;
}

.ust-bar-vitrin-link:hover {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.nav-kurumsal-vitrin {
	color: #1a4b8c !important;
}

.header-ana {
	display: grid;
	grid-template-columns: minmax(260px, auto) minmax(240px, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 14px 20px;
}

.logo-alan {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	min-width: 0;
	flex-shrink: 0;
	max-width: min(420px, 44vw);
}

.logo-alan img {
	flex: 0 0 auto;
	height: 76px;
	width: auto;
	min-height: 76px;
	max-width: 140px;
	min-width: 64px;
	max-height: none;
	object-fit: contain;
	border-radius: 12px;
	background: var(--renk-beyaz);
	box-shadow: 0 0 0 1px rgba(15, 39, 68, 0.06);
}

.logo-metin {
	min-width: 0;
	flex: 1 1 auto;
}

.logo-metin strong {
	color: var(--renk-koyu);
	font-size: clamp(15px, 1.6vw, 18px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.logo-metin span {
	display: block;
	color: var(--renk-muted);
	font-size: 12px;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header-arama-wrap {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: none;
	z-index: 5001;
}

.header-arama-wrap.aktif {
	z-index: 5002;
}

.header-arama {
	display: flex;
	align-items: center;
	border: 1px solid var(--renk-sinir);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--renk-beyaz);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.header-arama-ikon {
	display: flex;
	align-items: center;
	padding-left: 14px;
	color: var(--renk-muted);
}

.header-arama-wrap.aktif .header-arama {
	border-color: var(--renk-ana);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.header-arama input {
	flex: 1;
	border: 0;
	padding: 12px 10px;
	outline: none;
	min-width: 0;
	font-family: inherit;
	font-size: 14px;
}

.header-arama button {
	border: 0;
	background: var(--renk-ana);
	color: #fff;
	padding: 0 20px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	align-self: stretch;
	font-family: inherit;
	transition: background 0.15s;
}

.header-arama button:hover {
	background: var(--renk-ana-hover);
}

.canli-arama-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--marka-yuzey);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
	z-index: 5000;
	max-height: min(70vh, 520px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.canli-arama-panel[hidden] {
	display: none !important;
}

.canli-arama-yukleniyor,
.canli-arama-bos {
	padding: 20px 16px;
	color: var(--marka-muted);
	font-size: 0.92rem;
	text-align: center;
}

.canli-arama-liste {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	max-height: none;
	overflow: visible;
}

.canli-arama-liste-kucuk {
	max-height: 200px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.canli-arama-oge {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--dt-border);
	transition: background 0.15s;
}

.canli-arama-oge:last-child {
	border-bottom: 0;
}

.canli-arama-oge:hover,
.canli-arama-oge.aktif {
	background: var(--dt-surface-2);
}

.canli-arama-oge img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--dt-surface-2);
	border: 1px solid var(--dt-border);
}

.canli-arama-oge-bilgi {
	min-width: 0;
}

.canli-arama-oge-bilgi strong {
	display: block;
	font-size: 0.92rem;
	color: var(--marka-metin);
	line-height: 1.35;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.canli-arama-oge-bilgi span {
	display: block;
	font-size: 0.78rem;
	color: var(--marka-muted);
	margin-top: 3px;
}

.canli-arama-oge-fiyat {
	font-weight: 700;
	color: var(--renk-ana);
	font-size: 0.95rem;
	white-space: nowrap;
}

.canli-arama-oge mark {
	background: #fef08a;
	color: inherit;
	padding: 0 2px;
	border-radius: 2px;
}

.canli-arama-alt {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	background: var(--dt-surface-2);
	border-top: 1px solid #e2e8f0;
}

.canli-arama-alt a {
	color: var(--renk-ana);
	font-weight: 700;
	text-decoration: none;
	font-size: 0.92rem;
}

.canli-arama-alt a:hover {
	text-decoration: underline;
}

.canli-arama-grup-baslik {
	padding: 10px 14px 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--marka-muted);
	background: var(--dt-surface-2);
	border-top: 1px solid #eef2f7;
}

.canli-arama-liste-kucuk .canli-arama-oge {
	padding: 10px 14px;
	min-height: auto;
}

.canli-arama-oge-kucuk .canli-arama-oge-bilgi strong {
	font-size: 0.88rem;
}

.canli-arama-ikon {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	background: #f1f5f9;
	border-radius: 8px;
}

.header-aksiyonlar {
	display: flex;
	gap: 4px;
	align-items: center;
	flex-wrap: nowrap;
	flex-shrink: 0;
}

.header-aksiyon-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	padding: 7px 9px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 12px;
	color: var(--renk-koyu);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-sinir);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	white-space: nowrap;
	position: relative;
}

/* Siparişler / Karşılaştır — sadece ikon (üst çubuk sade) */
.header-aksiyon-btn.header-aksiyon-sik {
	padding: 7px 8px;
}

.header-aksiyon-btn.header-aksiyon-sik .header-aksiyon-metin {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.header-aksiyon-btn.header-aksiyon-cikis {
	color: #b91c1c;
	border-color: #fecaca;
	background: #fef2f2;
}

.header-aksiyon-btn.header-aksiyon-cikis:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #991b1b;
}

.header-aksiyon-btn.header-aksiyon-ikon {
	padding: 8px 9px;
}

.header-aksiyon-btn:hover {
	background: var(--renk-vurgu-soft);
	border-color: var(--marka-mavi-soft-2);
	color: var(--renk-ana);
}

.header-aksiyon-btn.header-aksiyon-birincil,
.header-aksiyon-btn.header-aksiyon-sepet {
	background: var(--renk-beyaz);
	color: var(--renk-koyu);
	border-color: var(--renk-sinir);
}

.header-aksiyon-btn.header-aksiyon-birincil:hover,
.header-aksiyon-btn.header-aksiyon-sepet:hover {
	background: var(--renk-vurgu-soft);
	border-color: var(--marka-mavi-soft-2);
	color: var(--renk-ana);
}

.header-aksiyon-btn em {
	font-style: normal;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 50px;
	background: var(--renk-ana);
	color: #fff;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.header-link, .header-sepet {
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
}

.header-link {
	background: var(--renk-vurgu-soft);
	color: var(--renk-ana);
}

.header-sepet {
	background: var(--renk-ana);
	color: #fff;
}

.header-sepet.pasif {
	background: #cbd5e1;
	color: #475569;
}

/* ===== ÜST HIZLI MENÜ ===== */
.nav-hizli-bar {
	background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
	border-bottom: 1px solid var(--renk-sinir);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.nav-hizli-katalog-btn {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	height: 40px;
	margin-right: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--renk-koyu);
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nav-hizli-katalog-btn:hover,
.nav-hizli-katalog-btn.aktif {
	color: var(--renk-ana);
	border-color: rgba(79, 70, 229, 0.35);
	background: var(--renk-vurgu-soft);
}

.nav-hizli-ic {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 48px;
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-width: none;
}

.nav-hizli-ic::-webkit-scrollbar { display: none; }

.nav-hizli-ic a,
.nav-hizli-link {
	padding: 0 16px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--renk-koyu);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.nav-hizli-ic a:hover,
.nav-hizli-link:hover {
	color: var(--renk-ana);
	border-bottom-color: var(--renk-ana);
}

.nav-hizli-link.aktif {
	color: var(--renk-ana);
	background: var(--renk-vurgu-soft);
	border-bottom-color: var(--renk-ana);
	border-radius: 8px 8px 0 0;
}

.nav-hizli-rozet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	margin-left: 2px;
	font-size: 11px;
	font-weight: 800;
	font-style: normal;
	line-height: 1;
	color: #fff;
	background: linear-gradient(135deg, #f59e0b, #ea580c);
	border-radius: 999px;
}

.nav-hizli-link.nav-havale {
	color: #b45309;
}

.nav-hizli-link.nav-havale.aktif,
.nav-hizli-link.nav-havale:hover {
	color: #92400e;
}

.nav-hizli-ic .nav-firsat,
.nav-hizli-link.nav-firsat {
	color: var(--renk-ana);
}

/* —— Nav v2: daha kompakt, pill tarzı —— */
.nav-hizli-v2 {
	background: var(--marka-yuzey);
	border-bottom: 1px solid var(--marka-sinir);
	box-shadow: none;
}

.nav-hizli-v2 .nav-hizli-ic {
	gap: 6px;
	min-height: 44px;
	padding: 6px 0;
}

.nav-hizli-v2 .nav-hizli-katalog-btn {
	display: inline-flex;
	height: 36px;
	margin-right: 2px;
	border-radius: 10px;
	font-size: 13px;
}

.nav-hizli-v2 .nav-hizli-link,
.nav-hizli-v2 .nav-hizli-ic a {
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	border-bottom: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--marka-metin);
}

.nav-hizli-v2 .nav-hizli-link:hover,
.nav-hizli-v2 .nav-hizli-ic a:hover {
	background: var(--dt-surface-2);
	color: var(--renk-ana);
	border-bottom-color: transparent;
}

.nav-hizli-v2 .nav-hizli-link.aktif,
.nav-hizli-v2 .nav-hizli-ic a.aktif {
	background: var(--renk-vurgu-soft);
	color: var(--renk-ana);
	border-radius: 10px;
}

.nav-hizli-v2 .nav-hizli-link.nav-destek {
	color: #5b21b6;
}

.nav-hizli-v2 .nav-hizli-link.nav-destek.aktif,
.nav-hizli-v2 .nav-hizli-link.nav-destek:hover {
	background: #f5f3ff;
	color: #6d28d9;
}

.nav-hizli-v2 .nav-hizli-link.nav-firsat {
	color: #c2410c;
}

.nav-hizli-v2 .nav-hizli-link.nav-firsat.aktif,
.nav-hizli-v2 .nav-hizli-link.nav-firsat:hover {
	background: #fff7ed;
	color: #ea580c;
}

.nav-hizli-servis.nav-hizli-v2 .nav-hizli-link.nav-hizli-magaza {
	margin-left: auto;
	color: var(--renk-ana);
}

.nav-hizli-servis.nav-hizli-v2 .nav-hizli-link.nav-hizli-magaza:hover {
	background: var(--renk-vurgu-soft);
}

/* —— Üst mega menü (Tüm Ürünler) —— */
.nav-hizli-bar {
	position: relative;
	z-index: 850;
	overflow: visible;
}

.nav-hizli-mega-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* Tam genişlik layout — sol katalog yok */
.site-layout-tam {
	grid-template-columns: minmax(0, 1fr) !important;
}

body.mod-mega-nav .site-layout {
	grid-template-columns: minmax(0, 1fr);
}

body.mod-mega-nav .site-icerik-alan {
	width: 100%;
	min-width: 0;
}

body.mod-mega-nav .site-layout {
	padding-top: 20px;
}

.sidebar-flyout-grup-wrap {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	padding-right: 4px;
}

.sidebar-flyout-tumu {
	margin-bottom: 2px;
}

.sidebar-flyout-grup-baslik {
	margin: 0 0 6px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--marka-mavi, #1a4b8c);
}

.sidebar-flyout-grup ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.urun-filtre-alt-baslik {
	margin: 10px 0 4px;
	padding: 0 0 0 2px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--marka-mavi, #1a4b8c);
	list-style: none;
}


/* ===== SOL KATALOG + HOVER FLYOUT (masaüstünde sabit) ===== */
.site-icerik,
.site-layout,
.site-icerik-alan {
	overflow: visible;
}

.site-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	align-items: start;
	padding: 24px 20px 40px;
}

.site-layout-servis {
	grid-template-columns: minmax(0, 1fr);
	max-width: 1180px;
	margin: 0 auto;
	width: 100%;
}

body.mod-servis .site-icerik-alan {
	width: 100%;
	min-width: 0;
	overflow: visible;
}

body.mod-servis .site-layout {
	grid-template-columns: minmax(0, 1fr);
}

body.mod-servis.mod-servis-katalog-acik .site-layout {
	grid-template-columns: 280px minmax(0, 1fr);
}

.sidebar-katalog-wrap {
	position: relative;
	width: 280px;
	z-index: 800;
	align-self: start;
}

.sidebar-katalog {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	max-height: calc(100dvh - var(--site-sticky-header-h, 182px) - var(--site-sticky-gutter, 10px) * 2);
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(15, 39, 68, 0.08);
	overflow: hidden;
}

.sidebar-katalog-baslik {
	grid-row: 1;
	padding: 0;
	border-bottom: none;
	background: linear-gradient(135deg, var(--marka-mavi-koyu, #153d6f) 0%, var(--marka-mavi, #1a4b8c) 55%, var(--marka-mavi-acik, #2a6cb8) 100%);
	border-radius: 14px 14px 0 0;
}

.sidebar-katalog-baslik-ic {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
}

.sidebar-katalog-baslik-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	flex-shrink: 0;
}

.sidebar-katalog-baslik-metin {
	min-width: 0;
}

.sidebar-katalog-baslik-metin strong {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
}

.sidebar-katalog-liste {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 6px 0 4px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: rgba(26, 75, 140, 0.45) rgba(26, 75, 140, 0.08);
}

.sidebar-katalog-liste::-webkit-scrollbar {
	width: 8px;
}

.sidebar-katalog-liste::-webkit-scrollbar-track {
	background: rgba(26, 75, 140, 0.06);
	border-radius: 999px;
}

.sidebar-katalog-liste::-webkit-scrollbar-thumb {
	background: rgba(26, 75, 140, 0.35);
	border-radius: 999px;
}

.sidebar-katalog-liste::-webkit-scrollbar-thumb:hover {
	background: rgba(26, 75, 140, 0.5);
}

.sidebar-kat-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	border-bottom: 1px solid #f1f5f9;
	border-radius: 0;
	border-left: 3px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}

.sidebar-katalog-liste .sidebar-kat-link:last-child {
	border-bottom: none;
}

.sidebar-kat-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	flex-shrink: 0;
}

.sidebar-kat-metin {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1;
	min-width: 0;
}

.sidebar-kat-baslik {
	font-size: 13px;
	font-weight: 700;
	color: inherit;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-kat-sayi {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--marka-muted);
	background: #f1f5f9;
	border-radius: 999px;
	flex-shrink: 0;
}

.sidebar-kat-link:hover,
.sidebar-kat-link.aktif,
.sidebar-kat-link.hover-aktif {
	color: var(--renk-ana);
	background: var(--renk-vurgu-soft);
	border-left-color: var(--renk-ana);
}

.sidebar-kat-ok {
	display: inline-flex;
	align-items: center;
	color: #cbd5e1;
	flex-shrink: 0;
	opacity: 0;
	width: 14px;
	transition: opacity .15s, color .15s;
}

.sidebar-kat-link:hover .sidebar-kat-ok,
.sidebar-kat-link.aktif .sidebar-kat-ok,
.sidebar-kat-link.hover-aktif .sidebar-kat-ok {
	color: var(--renk-vurgu);
	opacity: 1;
}

.sidebar-katalog-alt {
	grid-row: 3;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 10px 12px 12px;
	border-top: 1px solid #f1f5f9;
	background: #fafbfc;
	border-radius: 0 0 14px 14px;
}

.sidebar-alt-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 8px;
	font-size: 12px;
	font-weight: 700;
	color: #475569;
	text-decoration: none;
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 8px;
	transition: all .15s;
}

.sidebar-alt-link:hover {
	color: var(--renk-ana);
	border-color: rgba(79, 70, 229, 0.25);
	background: var(--renk-vurgu-soft);
}

.sidebar-alt-link.sidebar-alt-firsat {
	color: #c2410c;
	border-color: #fed7aa;
	background: #fff7ed;
}

.sidebar-alt-link.sidebar-alt-firsat:hover {
	color: #9a3412;
	border-color: #fdba74;
	background: #ffedd5;
}

.sidebar-flyout-aciklama {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--marka-muted);
}

.sidebar-ayrac {
	height: 1px;
	background: var(--renk-sinir);
	margin: 6px 0;
}

.sidebar-flyout {
	display: none;
	position: absolute;
	left: 100%;
	margin-left: -6px;
	top: 0;
	width: min(860px, calc(100vw - 300px));
	max-height: calc(100dvh - var(--site-sticky-header-h, 182px) - var(--site-sticky-gutter, 10px) * 2);
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-top: 3px solid var(--renk-vurgu);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(15, 39, 68, 0.12);
	z-index: 900;
	overflow: hidden;
}

.sidebar-flyout::before {
	content: '';
	position: absolute;
	left: -18px;
	top: 0;
	width: 18px;
	height: 100%;
	background: transparent;
}

.sidebar-katalog-wrap.flyout-acik .sidebar-flyout {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - var(--site-sticky-header-h, 182px) - var(--site-sticky-gutter, 10px) * 2);
}

.sidebar-flyout-panel {
	display: none;
	grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	height: 100%;
	max-height: calc(100dvh - var(--site-sticky-header-h, 182px) - var(--site-sticky-gutter, 10px) * 2);
	min-height: 0;
}

.sidebar-flyout-panel.aktif {
	display: grid;
}

.sidebar-flyout-liste {
	padding: 20px 16px;
	border-right: 1px solid #f1f5f9;
	overflow-x: hidden;
	overflow-y: auto;
	min-height: 0;
	max-height: none;
}

.sidebar-flyout-baslik {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--renk-vurgu);
}

.sidebar-flyout-liste ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-flyout-liste li { margin-bottom: 2px; }

.sidebar-flyout-liste a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 4px;
	font-size: 13px;
	color: #475569;
	text-decoration: none;
	border-radius: 6px;
}

.sidebar-flyout-liste a:hover {
	color: var(--renk-ana);
	background: var(--renk-vurgu-soft);
}

.sidebar-flyout-tumunu {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--renk-ana);
	text-decoration: none;
}

.sidebar-flyout-gorsel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	padding: 20px;
	overflow-x: hidden;
	overflow-y: auto;
	min-height: 0;
	max-height: none;
	align-content: start;
}

@media (min-width: 901px) {
	.sidebar-katalog {
		position: fixed;
		top: calc(var(--site-sticky-header-h, 182px) + var(--site-sticky-gutter, 10px));
		left: var(--sidebar-fixed-left, 20px);
		width: var(--sidebar-panel-width, 280px);
		z-index: 800;
	}

	.sidebar-flyout {
		position: fixed;
		left: calc(var(--sidebar-fixed-left, 20px) + var(--sidebar-panel-width, 280px) - 6px);
		top: calc(var(--site-sticky-header-h, 182px) + var(--site-sticky-gutter, 10px));
		margin-left: 0;
		width: min(860px, calc(100vw - var(--sidebar-fixed-left, 20px) - var(--sidebar-panel-width, 280px) - 24px));
	}
}

.sidebar-gorsel-kart {
	text-decoration: none;
	text-align: center;
	transition: transform .15s;
}

.sidebar-gorsel-kart:hover { transform: translateY(-3px); }

.sidebar-gorsel-resim {
	height: 110px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	border: 1px solid var(--renk-sinir);
	background: linear-gradient(145deg, #f8fafc, #eef4ff);
	overflow: hidden;
}

.sidebar-gorsel-resim img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
}

.sidebar-gorsel-ikon-kutu {
	border: 1px solid transparent;
	transition: border-color .15s, box-shadow .15s;
}

.sidebar-gorsel-kart:hover .sidebar-gorsel-ikon-kutu {
	border-color: rgba(79, 70, 229, 0.2);
	box-shadow: 0 8px 20px rgba(79, 70, 229, 0.12);
}

.mg-menu-ikon-indigo { background: linear-gradient(145deg, var(--marka-mavi-soft), var(--marka-mavi-soft-2)); color: var(--marka-mavi); }
.mg-menu-ikon-mavi { background: linear-gradient(145deg, #eff6ff, #dbeafe); color: #2563eb; }
.mg-menu-ikon-mor { background: linear-gradient(145deg, #f5f3ff, #ede9fe); color: #7c3aed; }
.mg-menu-ikon-gok { background: linear-gradient(145deg, #f0f9ff, #e0f2fe); color: #0284c7; }
.mg-menu-ikon-cam { background: linear-gradient(145deg, #ecfeff, #cffafe); color: #0891b2; }
.mg-menu-ikon-turuncu { background: linear-gradient(145deg, #fff7ed, #ffedd5); color: #ea580c; }
.mg-menu-ikon-amber { background: linear-gradient(145deg, #fffbeb, #fef3c7); color: #d97706; }
.mg-menu-ikon-kirmizi { background: linear-gradient(145deg, #fef2f2, #fee2e2); color: #dc2626; }
.mg-menu-ikon-yesil { background: linear-gradient(145deg, #ecfdf5, #d1fae5); color: #059669; }
.mg-menu-ikon-gri { background: linear-gradient(145deg, #f8fafc, #f1f5f9); color: var(--marka-muted); }

.mg-menu-ikon {
	display: block;
	flex-shrink: 0;
}

.sidebar-gorsel-emoji {
	font-size: 44px;
	line-height: 1;
}

.sidebar-gorsel-baslik {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--renk-koyu);
	line-height: 1.35;
}

/* Mobil kategori flyout — marka vitrini + grup başlıkları */
.sidebar-flyout-gorsel-mobil {
	display: flex;
	flex-direction: column;
	gap: 18px;
	grid-template-columns: unset;
}

.sidebar-flyout-gorsel-etiket {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #94a3b8;
}

.sidebar-flyout-marka-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.sidebar-marka-kart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 6px;
	text-decoration: none;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	background: var(--marka-yuzey);
	transition: transform .15s, box-shadow .15s, border-color .15s;
}

.sidebar-marka-kart:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(15, 39, 68, 0.1);
	border-color: #cbd5e1;
}

.sidebar-marka-ikon-kutu {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	box-sizing: border-box;
}

.sidebar-marka-wordmark {
	display: block;
	line-height: 1;
	text-align: center;
	user-select: none;
}

.sidebar-marka-wordmark-samsung {
	font-size: 7px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #1428a0;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
	white-space: nowrap;
}

.sidebar-marka-xiaomi .sidebar-marka-ikon-kutu {
	background: transparent;
	padding: 0;
}

.sidebar-marka-xiaomi .sidebar-marka-ikon {
	display: block;
	width: 52px;
	height: 52px;
}

.sidebar-marka-wordmark-xiaomi {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
	letter-spacing: -0.04em;
}

.sidebar-marka-wordmark-huawei {
	font-size: 7.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #cf0a2c;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}

.sidebar-marka-etiket {
	font-size: 11px;
	font-weight: 600;
	color: #334155;
	text-align: center;
	line-height: 1.25;
}

.sidebar-marka-apple .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #f8fafc, #f1f5f9); color: #1d1d1f; }
.sidebar-marka-samsung .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #f0f4ff, #e8eeff); color: #1428a0; }
.sidebar-marka-xiaomi .sidebar-marka-ikon-kutu { background: #ff6900; color: #fff; border-radius: 10px; }
.sidebar-marka-huawei .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #fff5f5, #ffe8e8); color: #cf0a2c; }
.sidebar-marka-android .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #ecfdf5, #d1fae5); color: #3ddc84; }
.sidebar-marka-watch .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #f5f3ff, #ede9fe); color: #7c3aed; }
.sidebar-marka-case .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #fdf4ff, #fae8ff); color: #a855f7; }
.sidebar-marka-powerbank .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #fffbeb, #fef3c7); color: #d97706; }
.sidebar-marka-headphones .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #f5f3ff, #ede9fe); color: #7c3aed; }
.sidebar-marka-tablet .sidebar-marka-ikon-kutu { background: linear-gradient(145deg, #f5f3ff, #ede9fe); color: #6366f1; }

.sidebar-flyout-grup-baslik-bolum {
	padding-top: 4px;
	border-top: 1px solid #f1f5f9;
}

.sidebar-flyout-grup-baslik-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.sidebar-grup-baslik-kart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px 14px;
	text-decoration: none;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	background: linear-gradient(145deg, #fafbfc, #f8fafc);
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.sidebar-grup-baslik-kart:hover {
	border-color: var(--marka-mavi, #1a4b8c);
	box-shadow: 0 6px 16px rgba(26, 75, 140, 0.1);
	background: var(--marka-yuzey);
}

.sidebar-grup-baslik-ikon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2px;
}

.sidebar-grup-baslik-metin {
	font-size: 13px;
	font-weight: 700;
	color: var(--renk-koyu, #0f2744);
	line-height: 1.3;
}

.sidebar-grup-baslik-adet {
	font-size: 11px;
	color: var(--marka-muted);
}

.mega-alt-ok {
	color: #cbd5e1;
	font-size: 12px;
}

.gorsel-notebook .sidebar-gorsel-resim { background: linear-gradient(145deg, #dbeafe, #eff6ff); }
.gorsel-pc .sidebar-gorsel-resim { background: linear-gradient(145deg, var(--marka-mavi-soft-2), var(--marka-mavi-soft)); }
.gorsel-yazici .sidebar-gorsel-resim { background: linear-gradient(145deg, #ffedd5, #fff7ed); }
.gorsel-cevre .sidebar-gorsel-resim { background: linear-gradient(145deg, #d1fae5, #ecfdf5); }
.gorsel-donanim .sidebar-gorsel-resim { background: linear-gradient(145deg, #e0f2fe, #f0f9ff); }
.gorsel-ag .sidebar-gorsel-resim { background: linear-gradient(145deg, #cffafe, #ecfeff); }
.gorsel-guvenlik .sidebar-gorsel-resim { background: linear-gradient(145deg, #fee2e2, #fef2f2); }
.gorsel-sarf .sidebar-gorsel-resim { background: linear-gradient(145deg, #fef3c7, #fffbeb); }
.gorsel-yazilim .sidebar-gorsel-resim { background: linear-gradient(145deg, #ede9fe, #f5f3ff); }

.vitrin-hizli-linkler {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

.vitrin-hizli-kart {
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 14px;
	padding: 18px;
	text-decoration: none;
	box-shadow: var(--golge);
	transition: transform .15s ease;
}

.vitrin-hizli-kart:hover {
	transform: translateY(-2px);
	border-color: var(--renk-ana);
}

.vitrin-hizli-kart strong {
	display: block;
	color: var(--renk-koyu);
	margin-bottom: 4px;
}

.vitrin-hizli-kart span {
	color: var(--marka-muted);
	font-size: 13px;
}

.vitrin-hizli-kart.kampanya {
	border-color: var(--marka-mavi-soft-2);
	background: linear-gradient(135deg, var(--renk-vurgu-soft), #fff);
}

.vitrin-hizli-kart.servis {
	border-color: #bfdbfe;
	background: linear-gradient(135deg, #eff6ff, #fff);
}

.sepet-sayfa h1 {
	margin: 0 0 20px;
	color: var(--renk-koyu);
}

.checkout-aciklama {
	color: var(--marka-muted);
	margin: 0 0 24px;
	line-height: 1.6;
}

.checkout-teslim-sekmeler {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.checkout-teslim-sekme {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border: 2px solid var(--renk-sinir);
	border-radius: 14px;
	background: var(--marka-yuzey);
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}

.checkout-teslim-sekme input {
	margin-top: 4px;
	flex-shrink: 0;
}

.checkout-teslim-sekme.aktif,
.checkout-teslim-sekme:has(input:checked) {
	border-color: var(--renk-birincil);
	box-shadow: 0 0 0 3px rgba(26, 75, 140, .12);
}

.checkout-teslim-sekme strong {
	display: block;
	color: var(--renk-koyu);
	margin-bottom: 4px;
}

.checkout-teslim-sekme small {
	color: var(--marka-muted);
	line-height: 1.4;
}

.checkout-teslim-panel {
	display: none;
}

.checkout-teslim-panel.aktif {
	display: block;
}

.checkout-isyeri-bilgi .checkout-isyeri-baslik {
	margin: 0 0 8px;
}

.checkout-isyeri-adres,
.checkout-isyeri-telefon,
.checkout-isyeri-saat {
	margin: 0 0 10px;
	color: #334155;
	line-height: 1.6;
}

.checkout-harita-wrap {
	margin: 16px 0 12px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--renk-sinir);
}

.checkout-harita-iframe {
	display: block;
	width: 100%;
	height: 260px;
	border: 0;
}

.odeme-teslim-ozet {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	margin-bottom: 20px;
	border-radius: 14px;
	border: 1px solid #bfdbfe;
	background: linear-gradient(135deg, #eff6ff, #fff);
}

.odeme-teslim-ozet strong {
	display: block;
	margin-bottom: 4px;
	color: var(--renk-koyu);
}

.odeme-teslim-ozet p {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.5;
}

.odeme-teslim-ozet .btn {
	margin-left: auto;
	flex-shrink: 0;
}

.checkout-bolum {
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 16px;
	padding: 22px;
	margin-bottom: 16px;
}

.checkout-bolum h2 {
	margin: 0 0 16px;
	font-size: 17px;
	color: var(--renk-koyu);
}

.checkout-bolum-ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.checkout-bolum-ust h2 {
	margin: 0;
}

.checkout-yeni-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--renk-ana);
	text-decoration: none;
}

.checkout-adres-liste,
.checkout-kargo-grid {
	display: grid;
	gap: 12px;
}

.checkout-kargo-grid {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.checkout-adres-kart,
.checkout-kargo-kart {
	cursor: pointer;
}

.checkout-adres-kart input,
.checkout-kargo-kart input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.checkout-adres-ic,
.checkout-kargo-ic {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border: 2px solid var(--renk-sinir);
	border-radius: 12px;
	background: var(--marka-yuzey);
	transition: border-color 0.2s, box-shadow 0.2s;
	height: 100%;
}

.checkout-kargo-ic {
	align-items: center;
	text-align: center;
}

.checkout-adres-kart input:checked + .checkout-adres-ic,
.checkout-kargo-kart input:checked + .checkout-kargo-ic {
	border-color: var(--renk-ana);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.checkout-adres-ic strong {
	color: var(--renk-koyu);
}

.checkout-adres-ic span {
	color: var(--marka-muted);
	font-size: 14px;
	line-height: 1.4;
}

.checkout-adres-tel {
	font-weight: 600;
	color: var(--renk-koyu) !important;
}

.checkout-kargo-ic img {
	height: 42px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	margin-bottom: 6px;
}

.checkout-kargo-ic strong {
	font-size: 13px;
	color: var(--renk-koyu);
}

.checkout-bos-kutu {
	background: var(--dt-surface-2);
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	padding: 18px;
	color: var(--marka-muted);
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.checkout-ozet .btn-genis {
	white-space: normal;
}

.sepet-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
}

.sepet-karsilastir {
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: var(--golge);
}

.sepet-karsilastir-bas {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.sepet-karsilastir-bas h2 {
	margin: 0 0 6px;
	font-size: 1.35rem;
	color: var(--renk-koyu);
}

.sepet-karsilastir-bas p {
	margin: 0;
	color: var(--marka-muted);
	font-size: 14px;
	line-height: 1.5;
}

.sepet-karsilastir-sayac {
	flex-shrink: 0;
	background: var(--renk-ana);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 6px 12px;
	border-radius: 999px;
}

.sepet-karsilastir-bos {
	text-align: center;
	padding: 20px 12px;
}

.sepet-karsilastir-ipucu {
	color: var(--marka-muted);
	font-size: 14px;
}

.sepet-karsilastir-tablo-wrap {
	overflow-x: auto;
	margin-bottom: 16px;
}

.sepet-karsilastir-tablo {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}

.sepet-karsilastir-tablo th,
.sepet-karsilastir-tablo td {
	border: 1px solid var(--renk-sinir);
	padding: 12px;
	vertical-align: top;
	font-size: 14px;
}

.sepet-karsilastir-etiket {
	background: var(--dt-surface-2);
	color: #475569;
	font-weight: 600;
	width: 140px;
	min-width: 120px;
	text-align: left;
}

.sepet-karsilastir-urun-kol {
	width: calc((100% - 140px) / 3);
	min-width: 180px;
	text-align: center;
	position: relative;
}

.sepet-karsilastir-bos-kol {
	width: calc((100% - 140px) / 3);
	min-width: 160px;
	background: var(--dt-surface-2);
}

.sepet-karsilastir-bos-hucre {
	background: var(--dt-surface-2);
	color: #94a3b8;
	text-align: center;
}

.sepet-karsilastir-kaldir {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	color: var(--marka-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
}

.sepet-karsilastir-kaldir:hover {
	background: #fee2e2;
	border-color: #fecaca;
	color: #dc2626;
}

.sepet-karsilastir-resim {
	display: block;
	margin: 0 auto 10px;
}

.sepet-karsilastir-resim img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--renk-sinir);
}

.sepet-karsilastir-urun-kol h3 {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.35;
}

.sepet-karsilastir-urun-kol h3 a {
	color: var(--renk-koyu);
	text-decoration: none;
}

.sepet-karsilastir-fiyat {
	font-weight: 700;
	color: var(--renk-ana);
	margin-bottom: 10px;
}

.sepet-karsilastir-sepet-form {
	margin: 0;
}

.sepet-karsilastir-stok-yok {
	display: inline-block;
	color: #dc2626;
	font-size: 13px;
	font-weight: 600;
}

.sepet-karsilastir-bos-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 180px;
	color: #94a3b8;
	padding: 12px;
}

.sepet-karsilastir-bos-slot span {
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
}

.sepet-karsilastir-aksiyon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.urun-kart-aksiyonlar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

.urun-kart-aksiyonlar .btn,
.urun-kart-aksiyonlar .urun-karsilastir-btn {
	width: 100%;
	justify-content: center;
}

.urun-karsilastir-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.urun-karsilastir-btn-aktif {
	border-color: #22c55e;
	color: #15803d;
	background: #f0fdf4;
}

.urun-karsilastir-btn-dolu {
	opacity: 0.55;
	pointer-events: none;
}

.header-aksiyon-karsilastir em:empty {
	display: none;
}

.sepet-satir {
	display: grid;
	grid-template-columns: 90px 1fr auto;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--renk-sinir);
	align-items: center;
}

.sepet-satir-resim img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--renk-sinir);
}

.sepet-satir-bilgi h3 {
	margin: 0 0 6px;
	font-size: 16px;
}

.sepet-satir-bilgi p {
	margin: 0 0 10px;
	color: var(--marka-muted);
	font-size: 13px;
}

.sepet-satir-adet {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sepet-satir-fiyat {
	text-align: right;
}

.sepet-sil {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: #dc2626;
	text-decoration: none;
}

.sepet-ozet {
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 16px;
	padding: 22px;
	box-shadow: var(--golge);
	height: fit-content;
	position: sticky;
	top: calc(var(--site-sticky-header-h, 182px) + var(--site-sticky-gutter, 10px));
}

.sepet-ozet-satir {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px dashed var(--renk-sinir);
}

.sepet-ozet-toplam {
	display: flex;
	justify-content: space-between;
	padding: 16px 0 20px;
	font-size: 18px;
	color: var(--renk-koyu);
}

.sepet-ucretsiz-kargo {
	font-size: 13px;
	color: var(--marka-muted);
}

.sepet-indirim-form {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--renk-sinir);
}
.sepet-indirim-form label {
	display: block;
	font-size: 13px;
	margin-bottom: 6px;
	color: var(--marka-muted);
}
.sepet-indirim-satir {
	display: flex;
	gap: 8px;
}
.sepet-indirim-satir .odeme-input {
	flex: 1;
	min-width: 0;
}
.sepet-indirim-kaldir {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: #dc2626;
	text-decoration: none;
}
.sepet-ozet-indirim strong { color: #16a34a; }
.sepet-bildirim-hata {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}
.odeme-indirim-not {
	color: #16a34a;
	font-size: 14px;
}

.btn-genis {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

.btn-kucuk {
	padding: 6px 12px !important;
	min-width: 36px;
}

.odeme-adimlari {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.odeme-adim {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	text-decoration: none;
	color: var(--renk-metin);
}

.odeme-adim.aktif {
	border-color: var(--renk-ana);
	background: #eef4ff;
}

.odeme-adim.tamam {
	border-color: #86efac;
}

.odeme-adim-no {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--renk-ana);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}

.odeme-sayfa h1 {
	margin: 0 0 12px;
	color: var(--renk-koyu);
}

.odeme-aciklama {
	color: var(--marka-muted);
	margin: 0 0 20px;
	line-height: 1.6;
}

.odeme-sekmeler {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.odeme-sekmeler-3 {
	grid-template-columns: repeat(3, 1fr);
}

.odeme-isyeri-konum {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed var(--renk-sinir);
}

.odeme-isyeri-konum h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 17px;
}

.odeme-isyeri-baslik {
	font-size: 16px;
	margin: 0 0 8px;
}

.odeme-isyeri-adres {
	color: #475569;
	line-height: 1.6;
	margin: 0 0 10px;
}

.odeme-isyeri-telefon,
.odeme-isyeri-saat {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin: 0 0 8px;
	color: #334155;
}

.odeme-harita-wrap {
	margin-top: 14px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--renk-sinir);
	background: var(--dt-surface-2);
}

.odeme-harita-iframe {
	display: block;
	width: 100%;
	height: 280px;
	border: 0;
}

.odeme-yol-tarifi {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.odeme-sekme {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 2px solid var(--renk-sinir);
	border-radius: 14px;
	background: var(--marka-yuzey);
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.odeme-sekme input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.odeme-sekme strong {
	display: block;
	font-size: 15px;
	color: var(--renk-koyu);
}

.odeme-sekme small {
	display: block;
	color: var(--marka-muted);
	font-size: 12px;
	margin-top: 2px;
}

.odeme-sekme.aktif {
	border-color: var(--renk-ana);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	background: #eef4ff;
}

.odeme-sekme-pasif {
	opacity: 0.65;
	cursor: not-allowed;
}

.odeme-sekme-icerik {
	display: none;
}

.odeme-sekme-icerik.aktif {
	display: block;
}

.odeme-panel-aksiyon {
	margin-top: 20px;
	padding-top: 8px;
}

.odeme-kart-form {
	display: grid;
	gap: 16px;
	margin: 16px 0 20px;
}

.odeme-form-satir {
	display: grid;
	grid-template-columns: 1fr 1fr 120px;
	gap: 12px;
}

.odeme-form-alan label,
.odeme-form-etiket {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	margin-bottom: 6px;
}

.odeme-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--renk-sinir);
	border-radius: 10px;
	font-size: 15px;
	background: var(--marka-yuzey);
}

.odeme-input:focus {
	outline: none;
	border-color: var(--renk-ana);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.odeme-kart-tur {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.odeme-kart-tur label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
}

.odeme-alt-baslik {
	margin: 20px 0 12px;
	font-size: 16px;
	color: var(--renk-koyu);
}

.odeme-kart-not {
	font-size: 13px;
	color: var(--marka-muted);
	margin: 10px 0 0;
}

.odeme-taksit-pasif {
	opacity: 0.5;
}

.odeme-form-pasif .odeme-input {
	background: var(--dt-surface-2);
}

.odeme-panel-onizleme {
	opacity: 0.85;
}

.odeme-bilgi-kutu {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px;
	border-radius: 12px;
	background: var(--dt-surface-2);
	border: 1px solid #e2e8f0;
	margin-bottom: 18px;
	color: #475569;
	line-height: 1.6;
}

.odeme-bilgi-kutu p {
	margin: 0;
	font-size: 14px;
}

.odeme-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
}

.odeme-yontem-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.odeme-yontem-kart {
	cursor: pointer;
}

.odeme-yontem-kart input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.odeme-yontem-ic {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	border: 2px solid var(--renk-sinir);
	border-radius: 14px;
	background: var(--marka-yuzey);
	transition: border-color 0.2s, box-shadow 0.2s;
	height: 100%;
}

.odeme-yontem-kart input:checked + .odeme-yontem-ic {
	border-color: var(--renk-ana);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.odeme-yontem-ikon {
	color: var(--renk-ana);
}

.odeme-yontem-ic strong {
	font-size: 15px;
	color: var(--renk-koyu);
}

.odeme-yontem-ic small {
	color: var(--marka-muted);
	font-size: 12px;
	line-height: 1.4;
}

.odeme-guvenli-rozet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ecfdf5;
	color: #047857;
	font-size: 11px;
	font-weight: 700;
}

.odeme-guven-bant {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 18px;
}

.odeme-guven-bant span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
	font-size: 12px;
	font-weight: 600;
}

.odeme-pos-uyari {
	margin-bottom: 16px;
}

.odeme-yontem-pasif {
	opacity: 0.72;
	cursor: not-allowed;
}

.odeme-bekleme-rozet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff7ed;
	color: #c2410c;
	font-size: 11px;
	font-weight: 700;
}

.odeme-iban-eksik {
	color: #b45309;
	font-size: 13px;
	font-weight: 600;
}

.odeme-panel {
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 16px;
	padding: 22px;
	margin-top: 8px;
}

.odeme-panel h2 {
	margin: 0 0 12px;
	font-size: 18px;
	color: var(--renk-koyu);
}

.odeme-kart-logolar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0;
}

.odeme-kart-logolar img {
	height: 28px;
	width: auto;
}

.odeme-taksit-liste {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.odeme-taksit-satir {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--renk-sinir);
	border-radius: 10px;
	cursor: pointer;
}

.odeme-taksit-satir:has(input:checked) {
	border-color: var(--renk-ana);
	background: #eef4ff;
}

.odeme-havale-uyari {
	background: var(--dt-surface-2);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 20px;
}

.odeme-havale-uyari p {
	margin: 0 0 10px;
	color: #475569;
	line-height: 1.5;
}

.odeme-havale-uyari p:last-child {
	margin-bottom: 0;
}

.odeme-ref-kod {
	background: #eef4ff;
	color: #1d4ed8;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 14px;
}

.odeme-hata-kutu {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	padding: 16px;
	border-radius: 12px;
}

.odeme-banka-liste {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.odeme-banka-kart {
	border: 1px solid var(--renk-sinir);
	border-radius: 14px;
	padding: 18px;
	background: var(--marka-yuzey);
}

.odeme-banka-ust {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.odeme-banka-logo {
	height: 36px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
}

.odeme-banka-ust h3 {
	margin: 0 0 4px;
	font-size: 16px;
}

.odeme-banka-ust p {
	margin: 0;
	color: var(--marka-muted);
	font-size: 13px;
}

.odeme-banka-detay {
	display: grid;
	gap: 10px;
	margin: 0;
}

.odeme-banka-detay div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 8px;
}

.odeme-banka-detay dt {
	margin: 0;
	font-weight: 600;
	color: var(--marka-muted);
	font-size: 13px;
}

.odeme-banka-detay dd {
	margin: 0;
	color: var(--renk-koyu);
}

.odeme-iban-satir dd,
.odeme-iban-satir-tek {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.odeme-iban-metin {
	font-size: 14px;
	letter-spacing: 0.03em;
	background: var(--dt-surface-2);
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px dashed #cbd5e1;
}

.odeme-sonuc-sayfa {
	max-width: 760px;
	margin: 0 auto;
}

.odeme-sonuc-hero {
	text-align: center;
	padding: 32px 20px;
	margin-bottom: 24px;
}

.odeme-sonuc-ikon {
	display: inline-flex;
	color: #16a34a;
	margin-bottom: 12px;
}

.odeme-sonuc-hero h1 {
	margin: 0 0 10px;
	color: var(--renk-koyu);
}

.odeme-sonuc-hero p {
	margin: 0;
	color: var(--marka-muted);
}

.odeme-sonuc-hero.odeme-sonuc-hata .odeme-sonuc-ikon {
	color: #dc2626;
}

.odeme-sonuc-kart {
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 16px;
	padding: 22px;
	margin-bottom: 16px;
}

.odeme-sonuc-kart h2 {
	margin: 0 0 14px;
	font-size: 18px;
}

.odeme-sonuc-detay {
	display: grid;
	gap: 10px;
	margin: 0;
}

.odeme-sonuc-detay div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--renk-sinir);
}

.odeme-sonuc-detay dt {
	margin: 0;
	color: var(--marka-muted);
}

.odeme-sonuc-detay dd {
	margin: 0;
	text-align: right;
}

.odeme-sonuc-adimlar {
	margin: 0;
	padding-left: 20px;
	color: #475569;
	line-height: 1.7;
}

.odeme-sonuc-adimlar li {
	margin-bottom: 8px;
}

.odeme-sonuc-aksiyonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.kategori-ust.genis {
	margin-bottom: 24px;
}

.kategori-aciklama {
	color: var(--marka-muted);
	margin: 0 0 16px;
}

@media (max-width: 1100px) {
	.sidebar-flyout { width: min(700px, calc(100vw - 260px)); }
	.sidebar-flyout-gorsel { grid-template-columns: repeat(2, 1fr); }
	.vitrin-hizli-linkler { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.site-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.nav-hizli-katalog-btn {
		display: inline-flex;
	}

	.sidebar-katalog-wrap {
		position: static;
		width: auto;
		min-height: 0 !important;
	}

	.sidebar-katalog-wrap:not(.mobil-acik) .sidebar-katalog {
		display: none;
	}

	.sidebar-katalog-wrap:not(.mobil-acik) .sidebar-flyout {
		display: none !important;
	}

	.sidebar-katalog-wrap.mobil-acik .sidebar-katalog {
		display: grid;
	}

	.sidebar-katalog {
		position: static;
		left: auto;
		width: auto;
		max-height: none;
	}

	.sidebar-flyout {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		margin-top: 8px;
		margin-left: 0;
		max-height: none;
	}

	.sidebar-flyout-panel.aktif { grid-template-columns: 1fr; }
	.header-ana { grid-template-columns: 1fr; }

	.header-aksiyonlar {
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px;
	}

	.header-aksiyon-btn {
		flex-direction: column;
		gap: 3px;
		padding: 6px 8px;
		min-width: 52px;
		font-size: 10px;
		line-height: 1.1;
		text-align: center;
	}

	.header-aksiyon-btn span {
		display: block;
		max-width: 56px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.header-aksiyon-btn.header-aksiyon-ikon span {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: nowrap;
		border: 0;
	}

	.kategori-layout { grid-template-columns: 1fr; }
}

.arama-formu-genis {
	width: 100%;
	max-width: 640px;
}

.arama-formu-genis .header-arama-wrap {
	max-width: none;
}

.arama-formu-genis .header-arama {
	border-radius: 12px;
}

.arama-formu-genis .btn-primary {
	border: 0;
	border-radius: 0;
	margin: 0;
}

@media (max-width: 768px) {
	.header-arama-wrap {
		max-width: none;
	}

	.canli-arama-panel {
		position: fixed;
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 12px;
		max-height: min(72vh, 520px);
	}

	.canli-arama-liste-kucuk {
		max-height: 160px;
	}

	.sepet-layout { grid-template-columns: 1fr; }
	.odeme-layout { grid-template-columns: 1fr; }
	.odeme-sekmeler,
	.odeme-sekmeler-3 { grid-template-columns: 1fr; }
	.odeme-form-satir { grid-template-columns: 1fr; }
	.vitrin-hizli-linkler { grid-template-columns: 1fr; }
	.header-ana {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"logo aksiyon"
			"arama arama";
		row-gap: 12px;
	}
	.logo-alan {
		grid-area: logo;
		max-width: none;
	}
	.header-aksiyonlar { grid-area: aksiyon; }
	.header-arama-wrap { grid-area: arama; }
	.logo-alan img {
		height: 68px;
		min-height: 68px;
		max-width: 120px;
	}
	.sidebar-flyout-gorsel { grid-template-columns: 1fr 1fr; }
}

.vitrin-banner img {
	width: 100%;
	border-radius: 14px;
	display: block;
	margin-bottom: 28px;
	box-shadow: var(--golge);
}

/* Kampanya carousel — ana sayfa haber bloğu */
.kampanya-carousel {
	position: relative;
	margin-bottom: 28px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--golge);
	background: var(--renk-koyu);
}

.kampanya-viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 1065 / 186;
	min-height: 140px;
	overflow: hidden;
}

.kampanya-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.kampanya-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	display: flex;
	align-items: stretch;
}

.kampanya-slide.aktif {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.kampanya-gorsel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kampanya-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #ff7a18 0%, #ff3d00 100%);
}

.kampanya-tema-1 .kampanya-gradient {
	background: linear-gradient(135deg, #ff7a18 0%, #ff3d00 55%, #c62828 100%);
}

.kampanya-tema-2 .kampanya-gradient {
	background: linear-gradient(135deg, #1565c0 0%, #0d47a1 55%, #002171 100%);
}

.kampanya-tema-3 .kampanya-gradient {
	background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 55%, #004d40 100%);
}

.kampanya-icerik {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 36px;
	max-width: 62%;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.kampanya-slide:has(.kampanya-gorsel) .kampanya-icerik {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
	max-width: 70%;
}

.kampanya-etiket {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.35);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.kampanya-baslik {
	margin: 0 0 8px;
	font-size: clamp(20px, 3vw, 32px);
	line-height: 1.2;
	font-weight: 800;
}

.kampanya-aciklama {
	margin: 0 0 14px;
	font-size: clamp(13px, 1.6vw, 16px);
	line-height: 1.5;
	opacity: 0.95;
}

.kampanya-buton {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--marka-yuzey);
	color: var(--renk-koyu);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kampanya-buton:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.kampanya-ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--renk-koyu);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: background 0.2s ease, transform 0.2s ease;
}

.kampanya-ok:hover {
	background: var(--marka-yuzey);
	transform: translateY(-50%) scale(1.05);
}

.kampanya-ok-once { left: 12px; }
.kampanya-ok-sonra { right: 12px; }

.kampanya-noktalar {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 8px;
}

.kampanya-nokta {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	padding: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

.kampanya-nokta.aktif {
	background: var(--marka-yuzey);
	transform: scale(1.2);
}

@media (max-width: 768px) {
	.kampanya-icerik {
		max-width: 100%;
		padding: 20px;
	}

	.kampanya-slide:has(.kampanya-gorsel) .kampanya-icerik {
		max-width: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 100%);
	}

	.kampanya-ok {
		width: 34px;
		height: 34px;
		font-size: 20px;
	}
}


.bolum-baslik {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 28px 0 16px;
}

.bolum-baslik h2 {
	margin: 0;
	color: var(--renk-koyu);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.bolum-baslik a {
	color: var(--renk-ana);
	text-decoration: none;
	font-weight: 600;
}

.urun-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.urun-kart {
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-sinir);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--golge);
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-height: 100%;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.urun-kart-resim {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: var(--dt-surface-2);
}

.urun-kart-resim img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--dt-surface-2);
	border-radius: 10px;
}

.urun-kart:hover {
	box-shadow: var(--golge-lg);
	border-color: var(--marka-mavi-soft-2);
	transform: translateY(-2px);
}

.urun-kart-etiket {
	font-size: 12px;
	font-weight: 700;
	color: var(--renk-vurgu);
	text-transform: uppercase;
}

.urun-kart h3 {
	margin: 0;
	font-size: 15px;
	min-height: 44px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.urun-kart h3 a {
	text-decoration: none;
	color: var(--renk-koyu);
}

.urun-kart-fiyat {
	font-weight: 700;
	color: var(--marka-lacivert, #0f2744);
}

.urun-fiyat-kdv-haric .urun-fiyat-kdv-etiket {
	font-style: normal;
	font-weight: 600;
	font-size: 0.82em;
	color: #64748b;
	margin-left: 0.15em;
}

.urun-detay-fiyat .urun-fiyat-gosterim {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
	padding: 10px 16px;
	font-weight: 600;
	border: 0;
	cursor: pointer;
}

.btn-primary {
	background: var(--renk-ana);
	color: #fff;
}

.btn-outline {
	background: var(--marka-yuzey);
	color: var(--renk-ana);
	border: 1px solid var(--renk-ana);
}

.avantajlar-bolum {
	margin-top: 36px;
	padding: 28px 0 8px;
}

.avantajlar-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.avantaj-kart {
	position: relative;
	overflow: hidden;
	background: var(--marka-yuzey);
	border-radius: 16px;
	padding: 24px 20px;
	border: 1px solid var(--renk-sinir);
	box-shadow: 0 8px 24px rgba(15, 39, 68, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avantaj-kart::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--avantaj-renk, var(--renk-ana));
}

.avantaj-kart:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(15, 39, 68, 0.12);
}

.avantaj-ikon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	background: var(--avantaj-ikon-bg, var(--renk-vurgu-soft));
}

.avantaj-kart h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--renk-koyu);
}

.avantaj-kart p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--renk-metin);
}

.avantaj-teslimat {
	--avantaj-renk: var(--marka-mavi);
	--avantaj-ikon-bg: var(--marka-mavi-soft);
}

.avantaj-guven {
	--avantaj-renk: #059669;
	--avantaj-ikon-bg: #ecfdf5;
}

.avantaj-online {
	--avantaj-renk: #2563eb;
	--avantaj-ikon-bg: #eff6ff;
}

.avantaj-destek {
	--avantaj-renk: #7c3aed;
	--avantaj-ikon-bg: #f5f3ff;
}

/* Eski sınıf uyumluluğu */
.avantajlar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 30px;
}

@media (max-width: 1100px) {
	.avantajlar-grid,
	.avantajlar {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.avantajlar-bolum {
		margin-top: 24px;
		padding-top: 16px;
	}

	.avantajlar-grid,
	.avantajlar {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.avantaj-kart {
		padding: 18px 16px;
	}
}

.kategori-sayfa { padding-top: 10px; }

.kategori-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
}

.kategori-sidebar {
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 14px;
	padding: 18px;
	height: fit-content;
}

.kategori-sidebar-baslik {
	font-size: 18px;
	font-weight: 700;
	color: var(--renk-koyu);
	margin-bottom: 8px;
}

.kategori-sidebar-aciklama {
	font-size: 13px;
	color: var(--marka-muted);
	margin-bottom: 14px;
}

.kategori-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.kategori-menu a {
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: var(--renk-metin);
	border-bottom: 1px solid #eef2f7;
	font-weight: 500;
}

.kategori-menu a.aktif,
.kategori-menu a:hover {
	color: var(--renk-vurgu);
}

.kategori-ust {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.kategori-ust h1 {
	margin: 0;
	color: var(--renk-koyu);
}

.arama-formu {
	display: flex;
	gap: 8px;
}

.arama-input {
	border: 1px solid var(--renk-sinir);
	border-radius: 8px;
	padding: 10px 12px;
	min-width: 260px;
}

.bos-urun {
	grid-column: 1 / -1;
	background: var(--marka-yuzey);
	border: 1px dashed var(--renk-sinir);
	border-radius: 12px;
	padding: 40px;
	text-align: center;
	color: var(--marka-muted);
}

.sayfalama {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	flex-wrap: wrap;
	gap: 12px;
}

.sayfalama-linkler a,
.sayfalama-linkler span {
	display: inline-block;
	margin-right: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
}

.sayfalama-linkers span.aktif,
.sayfalama-linkler span.aktif {
	background: var(--renk-ana);
	color: #fff;
	border-color: var(--renk-ana);
}

.site-footer {
	background: var(--renk-koyu);
	color: #cbd5e1;
	margin-top: 48px;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
	padding: 48px 20px 32px;
}

.footer-grid h4 {
	margin: 0 0 16px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.footer-grid a {
	display: block;
	text-decoration: none;
	color: #94a3b8;
	margin-bottom: 6px;
	font-size: 14px;
	transition: color 0.15s;
}

.footer-grid a:hover { color: #fff; }

.footer-iletisim-kolon h4 {
	margin: 0 0 16px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.footer-iletisim-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-iletisim-liste li {
	margin-bottom: 10px;
}

.footer-iletisim-liste a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	color: #94a3b8;
	font-size: 14px;
	transition: color 0.15s;
}

.footer-iletisim-liste a:hover {
	color: #fff;
}

.footer-iletisim-etiket {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--marka-muted);
}

.footer-iletisim-deger {
	font-size: 14px;
	font-weight: 600;
	color: #e2e8f0;
}

.footer-iletisim-liste a:hover .footer-iletisim-deger {
	color: #fff;
}

.footer-adres {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.footer-adres-baslik {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--marka-muted);
	margin-bottom: 6px;
}

.footer-adres-satir {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.45;
	color: #e2e8f0;
}

.footer-adres-harita {
	margin: 8px 0 0;
	font-size: 13px;
}

.footer-adres-harita a {
	color: #93c5fd;
	text-decoration: none;
}

.footer-adres-harita a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer-hukuki-satir {
	font-size: 12px;
	color: var(--marka-muted);
	margin: 6px 0 0;
}

.footer-alt {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.12);
	padding: 0;
}

.footer-alt-ic {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
	padding: 18px 20px;
	font-size: 13px;
	color: #94a3b8;
}

.footer-alt-metin p {
	margin: 0;
}
.footer-yazilim-atif {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--marka-muted);
}
.footer-yazilim-atif strong {
	color: #cbd5e1;
	font-weight: 700;
}

.footer-yazilim-link {
	color: inherit;
	text-decoration: none;
}

.footer-yazilim-link:hover {
	text-decoration: underline;
	color: #fff;
}

.kurumsal-koruma-uyari {
	font-size: 13px;
	color: var(--renk-soluk, #64748b);
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba(15, 23, 42, 0.04);
	border-radius: 8px;
	border-left: 3px solid var(--renk-ana, #2563eb);
}

.kurumsal-sozlesme-koruma {
	user-select: none;
	-webkit-user-select: none;
}

.footer-sosyal a {
	color: #94a3b8;
	text-decoration: none;
	margin-left: 0;
	font-weight: 600;
}

.footer-sosyal a:hover { color: #fff; }

.kategori-hizli-menu {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}

.kategori-hizli-kart {
	background: var(--marka-yuzey);
	border: 1px solid var(--renk-sinir);
	border-radius: 12px;
	padding: 14px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.kategori-hizli-emoji {
	display: block;
	font-size: 28px;
	margin-bottom: 8px;
}

.kategori-hizli-kart:hover {
	transform: translateY(-2px);
	box-shadow: var(--golge);
}

.kategori-hizli-kart strong {
	display: block;
	color: var(--renk-koyu);
	margin-bottom: 4px;
}

.kategori-hizli-kart span {
	color: var(--marka-muted);
	font-size: 13px;
}


/* Eski tablo sayfalarıyla uyum */
table[width="1065"] {
	width: 100% !important;
	max-width: var(--genislik);
	margin: 0 auto;
}