/* =========================================================================
   TABELAMATIK MEGA MENÜ — Trendyol tarzı üst menü
   Masaüstü (≥922px): yatay bar + "Kategoriler" mega paneli
   Mobil (<922px):    hamburger → sağdan çekmece (kategoriler akordeon)
   Kimlik: kırık beyaz zemin + yeşil (#1e7d3b), lime vurgu (#cbd50e)
   ========================================================================= */

.tm-nav,
.tm-drawer,
.tm-drawer__overlay {
	--mn-green: #1e7d3b;
	--mn-green-dark: #145a2a;
	--mn-lime: #cbd50e;
	--mn-ink: #23241e;
	--mn-muted: #6f6f66;
	--mn-bg: #f7f5ec;
	--mn-card: #ffffff;
	--mn-border: #e6e3d6;
	--mn-hover: #f2f8f3;
	--mn-shadow: 0 18px 46px rgba(35, 36, 30, .16);
	--mn-ease: cubic-bezier(.22, .8, .36, 1);

	position: relative;
	width: 100%;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mn-ink);
}

.tm-nav *, .tm-nav *::before, .tm-nav *::after,
.tm-drawer *, .tm-drawer *::before, .tm-drawer *::after { box-sizing: border-box; }
.tm-nav a, .tm-drawer a { text-decoration: none !important; }
.tm-nav ul, .tm-drawer ul { list-style: none; margin: 0; padding: 0; }
.tm-nav button, .tm-drawer button { font: inherit; cursor: pointer; }
.tm-nav svg, .tm-drawer svg { flex: 0 0 auto; }
.tm-drawer { font-size: 14px; line-height: 1.4; color: #23241e; }

/* ====================== BAR (masaüstü) ====================== */

.tm-nav__bar {
	display: flex;
	align-items: center;
	gap: 2px;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 12px;
	overflow: visible;
}

.tm-nav__item { position: relative; flex: 0 0 auto; }

.tm-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 13px 16px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--mn-ink) !important;   /* siyah öğeler */
	white-space: nowrap;
	position: relative;
	transition: color .2s ease;
}

/* Öğeler arası ince dikey ayraç (Kategoriler düğmesinden sonraki ilk öğe dahil) */
.tm-nav__link + .tm-nav__link::before,
.tm-nav__item--all + .tm-nav__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 16px;
	background: rgba(35, 36, 30, .18);
}

/* Hover/aktif: yeşil alt çizgi metnin altında kayar */
.tm-nav__link::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 7px;
	height: 2px;
	border-radius: 2px;
	background: var(--mn-green);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s var(--mn-ease);
}

.tm-nav__link:hover { color: var(--mn-green) !important; }
.tm-nav__link:hover::after,
.tm-nav__link.is-current::after { transform: scaleX(1); }
.tm-nav__link.is-current { color: var(--mn-green) !important; font-weight: 700; }

/* Sabit linklerden sonuncusu (B2B) hap butonu */
.tm-nav__link:last-child:not(.tm-nav__item--all) {
	margin-left: auto;
	border: 1px solid rgba(35, 36, 30, .35);
	border-radius: 999px;
	padding: 6px 16px;
	transition: all .2s ease;
}

.tm-nav__link:last-child::after,
.tm-nav__link:last-child::before { display: none; }
.tm-nav__link:last-child:hover { background: var(--mn-green); border-color: var(--mn-green); color: #fff !important; }

/* "Kategoriler" düğmesi */
.tm-nav__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	margin-right: 8px;
	background: var(--mn-ink);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13.5px;
	transition: background .2s ease;
}

.tm-nav__all > svg:first-child { color: var(--mn-lime); }

.tm-nav__all:hover,
.tm-nav__item--all.is-open .tm-nav__all { background: var(--mn-green); }
.tm-nav__all:hover > svg:first-child,
.tm-nav__item--all.is-open .tm-nav__all > svg:first-child { color: #fff; }

.tm-nav__caret { display: inline-flex; transition: transform .25s var(--mn-ease); }
.tm-nav__item--all.is-open .tm-nav__caret { transform: rotate(180deg); }

/* ====================== MEGA PANEL ====================== */

.tm-mega {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	width: min(1080px, calc(100vw - 32px));
	background: var(--mn-card);
	border: 1px solid var(--mn-border);
	border-radius: 16px;
	box-shadow: var(--mn-shadow);
	display: grid;
	grid-template-columns: 270px 1fr;
	overflow: hidden;
	z-index: 10001;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s var(--mn-ease), visibility 0s linear .18s;
}

.tm-nav__item--all.is-open .tm-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/* Sol sütun: kök kategoriler */
.tm-mega__roots {
	background: var(--mn-bg);
	border-right: 1px solid var(--mn-border);
	padding: 12px 10px;
	max-height: 72vh;
	overflow-y: auto;
	scrollbar-width: thin;
}

.tm-mega__root + .tm-mega__root { border-top: 1px solid rgba(35, 36, 30, .08); }

.tm-mega__root a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	color: var(--mn-ink) !important;
	transition: all .15s ease;
}

.tm-mega__root a svg { color: var(--mn-muted); opacity: 0; transition: opacity .15s ease; }

.tm-mega__root.is-active a,
.tm-mega__root a:hover {
	background: #fff;
	color: var(--mn-green) !important;
	box-shadow: 0 1px 3px rgba(35, 36, 30, .08);
}

.tm-mega__root.is-active a svg { opacity: 1; color: var(--mn-green); }

/* Sağ: alt kategori grupları */
.tm-mega__panels {
	position: relative;
	padding: 26px 30px 24px;
	max-height: 72vh;
	overflow-y: auto;
	scrollbar-width: thin;
}

.tm-mega__panel { display: none; }
.tm-mega__panel.is-active {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 0;
	align-content: start;
}

.tm-mega__group {
	min-width: 0;
	padding: 0 24px;
	border-left: 1px solid rgba(35, 36, 30, .14); /* silik dikey ayraç */
}

.tm-mega__group:nth-child(3n + 1) { border-left: none; padding-left: 0; }
.tm-mega__group:nth-child(3n)     { padding-right: 0; }

/* 4. gruptan itibaren yeni satır: üstte silik yatay ayraç */
.tm-mega__group:nth-child(n + 4) {
	padding-top: 22px;
	border-top: 1px solid rgba(35, 36, 30, .12);
}

.tm-mega__group:nth-child(-n + 3) { padding-top: 0; border-top: none; }

.tm-mega__gtitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: var(--mn-ink) !important;
	padding-bottom: 10px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--mn-lime);
}

.tm-mega__gtitle svg { color: var(--mn-green); }

.tm-mega__gtitle:hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* Ürün satırı: mini görsel + ad, satırlar arası ayraç */
.tm-mega__group ul li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 2px;
	font-size: 13.5px;
	line-height: 1.35;
	color: #3f4039 !important;
	border-radius: 8px;
	transition: color .15s ease, background .15s ease;
}

.tm-mega__group ul li + li a { border-top: 1px solid rgba(35, 36, 30, .07); border-radius: 0 0 8px 8px; }
.tm-mega__group ul li:first-child a { border-radius: 8px 8px 0 0; }

.tm-mega__group ul li a:hover { color: var(--mn-green) !important; background: #f7f7f3; }

.tm-mega__thumb {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 7px;
	background: #f2f1ea;
	border: 1px solid var(--mn-border);
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tm-mega__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tm-mega__pname {
	flex: 1;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tm-mega__more {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mn-green) !important;
}

.tm-mega__more:hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* ====================== MOBİL ====================== */

.tm-nav__burger { display: none; }
.tm-drawer, .tm-drawer__overlay { display: none; }

/* Astra'nın kendi hamburgerinin açtığı boş mobil menü panelini gizle
   (içerik artık bizim çekmecede) */
#ast-mobile-header .ast-mobile-header-content,
.ast-mobile-popup-drawer { display: none !important; }

/* Mobil header'a enjekte edilen hamburger — sepet/kalp/kullanıcı ile aynı eksende */
.tm-mobile-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 42px;
	height: 42px;
	margin: 0;
	border: none;
	background: transparent;
	color: #23241e;
	padding: 0;
	cursor: pointer;
	border-radius: 0;
	line-height: 0;
	vertical-align: middle;
	position: static;
	transform: none;
}
.tm-mobile-burger svg { display: block; }

/* Enjekte edilen burger'in sarmalayıcısı da dikey ortada */
#masthead .ast-header-mobile-trigger,
#masthead .ast-builder-layout-element.ast-header-mobile-trigger,
#masthead [class*="menu-trigger"] {
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}
.tm-mobile-burger:hover { color: #1e7d3b; background: transparent; }
@media (min-width: 922px) { .tm-mobile-burger { display: none; } }

/* Çekmece body altındayken (mobil) — nav gizli olsa da çalışır.
   AÇIK durum !important: kapalı halin translateX(100%) kuralına asla yenilmez. */
@media (max-width: 921px) {
	body > .tm-drawer { display: flex; }
	body > .tm-drawer__overlay { display: block; }
	body.tm-drawer-open > .tm-drawer,
	body.tm-drawer-open .tm-drawer { transform: translateX(0) !important; }
	body.tm-drawer-open > .tm-drawer__overlay,
	body.tm-drawer-open .tm-drawer__overlay { opacity: 1 !important; visibility: visible !important; transition-delay: 0s !important; }
}

@media (max-width: 921px) {
	/* Masaüstü bar ve mega panel mobilde KESİNLİKLE gizli (Astra öğe kurallarını ez) */
	.tm-nav .tm-nav__bar,
	.tm-nav .tm-mega,
	#masthead .tm-nav__bar,
	#masthead .tm-mega { display: none !important; }
	/* Mobil header'daki tm-nav sarmalayıcısı sadece burger kadar yer kaplasın
	   ve zincirin TAMAMI dikey ortada dursun (diğer ikonlarla aynı eksen) */
	#masthead .tm-has-nav,
	#masthead .tm-nav {
		width: auto !important;
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
		height: 100% !important;
		min-height: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	#masthead .tm-nav .tm-nav__burger { align-self: center; margin: 0; }

	.tm-nav .tm-nav__burger {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: none;
		background: transparent;
		color: var(--mn-ink);
		padding: 0;
	}

	.tm-drawer__overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(20, 22, 18, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility 0s linear .25s;
		z-index: 99998;
	}

	.tm-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(360px, 88vw);
		background: #fff;
		box-shadow: -12px 0 40px rgba(0, 0, 0, .25);
		transform: translateX(100%);
		transition: transform .28s var(--mn-ease);
		z-index: 99999;
	}

	.tm-nav.is-drawer-open .tm-drawer,
	body.tm-drawer-open .tm-drawer { transform: translateX(0); }
	.tm-nav.is-drawer-open .tm-drawer__overlay,
	body.tm-drawer-open .tm-drawer__overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
	body.tm-drawer-lock { overflow: hidden; }

	.tm-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid var(--mn-border);
		font-size: 16px;
	}

	.tm-drawer__close {
		width: 38px;
		height: 38px;
		border: none;
		background: transparent;
		color: var(--mn-ink);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.tm-drawer__body { flex: 1; overflow-y: auto; padding: 8px 0 24px; -webkit-overflow-scrolling: touch; }

	.tm-drawer__label {
		padding: 12px 16px 6px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--mn-muted);
	}

	.tm-drawer__row {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0eee3;
	}

	.tm-drawer__row > a {
		flex: 1;
		padding: 13px 16px;
		font-weight: 600;
		font-size: 15px;
		color: var(--mn-ink) !important;
	}

	.tm-drawer__toggle {
		width: 48px;
		height: 48px;
		border: none;
		background: transparent;
		color: var(--mn-muted);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		transition: transform .25s var(--mn-ease), color .2s ease;
	}

	.tm-drawer__cat.is-open .tm-drawer__toggle { transform: rotate(180deg); color: var(--mn-green); }
	.tm-drawer__cat.is-open .tm-drawer__row > a { color: var(--mn-green) !important; }

	.tm-drawer__sub {
		background: var(--mn-bg);
		padding: 8px 16px 12px 24px;
		border-bottom: 1px solid #f0eee3;
	}

	.tm-drawer__gtitle {
		display: block;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(35, 36, 30, .12); /* gruplar arası silik ayraç */
		font-weight: 700;
		font-size: 13.5px;
		color: var(--mn-green) !important;
	}

	.tm-drawer__gtitle:first-child { margin-top: 0; padding-top: 4px; border-top: none; }

	.tm-drawer__gtitle span { color: var(--mn-muted); font-weight: 500; }

	/* Ürün satırı: mini görsel + ad + ok, satırlar arası ayraç — sade ve okunur */
	.tm-drawer__sub { background: #fff; padding: 6px 12px 12px 12px; }
	.tm-drawer__prod {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 9px 4px;
		font-size: 13.5px;
		line-height: 1.35;
		color: var(--mn-ink) !important;
		border-left: none;
		border-bottom: 1px solid rgba(35, 36, 30, .08);
	}
	.tm-drawer__prod:last-of-type { border-bottom: none; }
	.tm-drawer__prod + .tm-drawer__prod { border-top: none; }
	.tm-drawer__prod svg { margin-left: auto; color: #b3b3aa; flex: 0 0 auto; }
	.tm-drawer__thumb {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		background: #f2f1ea;
		border: 1px solid var(--mn-border);
		overflow: hidden;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.tm-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.tm-drawer__pname {
		flex: 1;
		min-width: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.tm-drawer__gtitle {
		margin-top: 14px;
		padding-top: 12px;
		font-size: 12px !important;
		letter-spacing: .06em;
		text-transform: uppercase;
	}
	.tm-drawer__gtitle:first-child { margin-top: 0; padding-top: 6px; }

	.tm-drawer__all {
		display: inline-block;
		margin-top: 10px;
		font-size: 13px;
		font-weight: 700;
		color: var(--mn-ink) !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}

	.tm-drawer__static li a {
		display: block;
		padding: 12px 16px;
		font-weight: 600;
		font-size: 15px;
		color: var(--mn-ink) !important;
		border-bottom: 1px solid #f0eee3;
	}
}

/* Astra'nın HTML öğe sarmalayıcısı bar'ı sıkıştırmasın */
.tm-has-nav {
	width: 100%;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.tm-nav * { transition-duration: .01ms !important; }
}

/* =========================================================================
   ASTRA UYUMU — mega menü Header Builder'daki bir HTML öğesinde yaşar.
   Öğe, satırın tamamını kaplasın; Astra'nın öğe dolguları bar'ı bozmasın.
   ========================================================================= */

#masthead .ast-builder-layout-element.tm-has-nav {
	flex: 1 1 100%;
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
}

#masthead .site-header-section.tm-has-nav {
	flex: 1 1 100%;
	width: 100%;
	justify-content: stretch;
}

@media (min-width: 922px) {
	/* Bar satırının zemini header.css'te (kırık beyaz) tanımlı — burada
	   yalnızca dikey dolgu: bar 46px hissini korur */
	#masthead .ast-below-header-bar.tm-has-nav .ast-builder-grid-row {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

@media (max-width: 921px) {
	/* Mobil header'da yalnızca hamburger görünür, sağa yaslı */
	#masthead .ast-builder-layout-element.tm-has-nav {
		flex: 0 0 auto;
		width: auto;
	}
}

/* Rozet: "Yeni" gibi küçük kırmızı etiket (Trendyol tarzı) */
.tm-nav__badge{display:inline-block;margin-left:6px;padding:2px 7px;font-size:10px;font-weight:800;line-height:1.3;color:#fff;background:#e5484d;border-radius:999px;vertical-align:middle;letter-spacing:.02em}