/* =========================================================
   NAVIGATION.CSS - Ana menü + kategori menüsü (POP/SLOW/ARABESK..)
   ========================================================= */

/* --- Ana menü (logo yanındaki) --- */
.primary-menu-list {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.primary-menu-list a {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-text);
	transition: color var(--transition-base);
}

.primary-menu-list a:hover {
	color: var(--color-primary);
}

/* --- Kategori menüsü şeridi: POP / SLOW / ARABESK / THM ... --- */
.category-navigation {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
}

.category-menu-list {
	display: flex;
	gap: var(--space-sm);
	overflow-x: auto;
	padding-block: var(--space-md);
	scrollbar-width: thin;
}

.category-menu-list::-webkit-scrollbar {
	height: 4px;
}

.category-menu-list::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 999px;
}

.category-menu-list li {
	flex: 0 0 auto;
}

.category-menu-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	transition: all var(--transition-base);
}

.category-menu-list a:hover,
.category-menu-list li.current-menu-item a {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* --- Footer alt menü --- */
.footer-menu-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md) var(--space-lg);
	padding-block: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-menu-list a {
	font-size: var(--fs-sm);
	color: var(--color-footer-text);
	transition: color var(--transition-base);
}

.footer-menu-list a:hover {
	color: var(--color-text-inverse);
}